次のコードに示すコードコメントに記載されているように、使用できるコンストラクターに取り組んでいます。
//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 をチェックする手段がすでにあると思っていました...