1

次のコードに示すコードコメントに記載されているように、使用できるコンストラクターに取り組んでいます。

//CONSTRUCTOR
//creates a child element of the specified kind
//adds the child to specified parent
//optionally assigns the child an ID
// optionally assigns the child up to 4 classes

function Adjoin(childKind = undefined, childID = undefined, firstChildClass = undefined, secondChildClass = undefined, thirdChildClass = undefined, fourthChildClass = undefined) {
  if (!(this instanceof Adjoin)) {
    return new Adjoin(childKind = undefined, childID = undefined, firstChildClass = undefined, secondChildClass = undefined, thirdChildClass = undefined, fourthChildClass = undefined);
  }
  this.childKind = childKind;
  this.childID = childID;
  this.firstChildClass = firstChildClass;
  this.secondChildClass = secondChildClass;
  this.thirdChildClass = thirdChildClass;
  this.addChildTo = function(parentID) {

    const parent = document.getElementById(parentID);
    const child = document.createElement(childKind);

    parent.appendChild(child);

    if (childID !== undefined) {
      child.setAttribute("id", childID);
    }

    if (firstChildClass !== undefined) {
      child.classList.add(firstChildClass);
    }

    if (secondChildClass !== undefined) {
      child.classList.add(secondChildClass);
    }

    if (thirdChildClass !== undefined) {
      child.classList.add(thirdChildClass);
    }

    if (fourthChildClass !== undefined) {
      child.classList.add(fourthChildClass);
    }
  }
};

これは、次のようなコードをどこかに入力すると機能します。

new Adjoin("div", "foo_id", "foo_class").addChildTo("some_parent")

これもうまくいきます:

new Adjoin("div").addChildTo("some_parent")

私が行き詰まっているのは、最初のパラメーターが HTML タグ名の 1 つであるかどうかを確認する手段です。たとえば、コードが次のように入力された場合にエラーをスローしたい:

new Adjoin("not_an_html_element", "foo_id", "foo_class").addChildTo("manchoo_parent")

前もって感謝します!

アップデート

さて、この質問を投稿するのが少し早すぎたようです。次のコードを入力しました。

new Adjoin(75).addChildTo("footer");

このエラーが発生しました:

キャッチされない DOMException: 'Document' で 'createElement' を実行できませんでした: 指定されたタグ名 ('75') は有効な名前ではありません。

したがって、すでに組み込みエラーがあります。

ただし、次のコードを入力すると:

new Adjoin("DaveyJones").addChildTo("footer");

サイトのフッターに次の「タグ」が追加されます。

<daveyjones></daveyjones>

明らかに、これは有効な HTML タグではありません。

文字列以外の場合はエラーがスローされますが、文字列はエラーなしで HTML タグに追加されます。

さらに別の更新

user2676208 で提案されたように、この質問では条件として設定して、これを試しました。

if (document.createElement(this.childKind).toString() != "[HTMLUnknownElement]") {
  console.log("That is a valid HTML element!")
} else {
  console.log("That is NOT a valid HTML element!")
}

ただし、常に「それは有効な HTML 要素です!」というログが記録されます。「div」または「DaveyJones」または「anyOtherString」のいずれを使用するか。

このアイデアは好きではありませんが、タグ名の配列を設定し、ループで比較を行う必要があるかもしれません。私には不器用に思えるので、それを回避する方法があることを本当に望んでいました. Javascript には、有効な HTML をチェックする手段がすでにあると思っていました...

4

3 に答える 3