javascript - appendChild で作成した要素にクラスを追加する方法

Question

javascriptでappendChildで作成した要素にクラスを追加する方法を知りたい

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

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

私は Javascript を使用しているだけで、jQuery は好きではありません。純粋な JavaScript で回答を送信してください。

Answer 1

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

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

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

classNameを使用することができます：

input.className = "foo";

classList：

input.classList.add("foo");

setAttribute：

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

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

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

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

等々。

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

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

それが役に立てば幸い。

Answer 2

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

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";

Answer 3

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

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