web-dev-qa-db-ja.com

appendChildによって作成された要素にクラスを追加する方法

JavascriptのappendChildで作成した要素にクラスを追加する方法を尋ねたい

document.forms[0].appendChild(document.createElement("input"));

作成した入力要素にクラスを追加する方法は？

私はJavascriptを使用していますが、jQueryが好きではありません。答えを純粋なjavascriptで送信してください。

javascriptappendchild
19
Alfred Seattle

JavascriptのappendChildで作成した要素にクラスを追加する方法を尋ねたい

他の要素と同様に、参照があります。 JSでcreateElementを介して作成されたか、別の方法でノードへの参照を取得したかは関係ありません。 inputにノードへの参照が含まれると仮定します。

var input = document.createElement("input");

className を使用できます。

input.className = "foo";

classList ：

input.classList.add("foo");

setAttribute ：

input.setAttribute("class", "foo");

最初のブラウザはどのブラウザでも広くサポートされているため、最新のブラウザを使用しておらず、設定した各クラスを操作したい場合を除き、classListがより便利であることを強くお勧めします。 setAttributeを使用すると、JSオブジェクトのクラス名ではなくHTMLの属性を設定するため、後者を強く避けます。ブラウザーはその値をJSのプロパティにマッピングしますが、場合によっては失敗します（たとえば、IEの一部のバージョンを参照）、HTMLノードにその属性がある場合でも、クラスは適用されません。

上記のすべてのメソッドは、ノード参照を取得する方法にかかわらずHTMLにも関わらず機能していることに注意してください。

var input = document.getElementById("my-input");

等々。

あなたの場合、appendChildは追加されたノードへの参照を返すため、1つのステートメントですべてを記述することもできます。

document.forms[0]
    .appendChild(document.createElement("input"))
    .className = "foo";

それが役に立てば幸い。

46
ZER0

作成された要素には変数が必要です。

var input = document.createElement("input");
input.className = 'class_to_add';
document.forms[0].appendChild(input);

更新：

.appendChildは子を返すので、変数なしで行うこともできます。

document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";
9
xdazz

SetAttributeメソッドとgetAttributeメソッドを使用します。

var i = document.createElement('input'); 
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);
1
Geuis

お気に入り：

document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";
1
Kernel James