Как добавить класс в элемент create by appendChild

Ответ 1

Я хочу спросить, как добавить класс для элемента, созданного appendChild в javascript

Как и любой другой элемент, у вас есть ссылка. Не имеет значения, создан ли он в JS через createElement, или вы получили ссылку на node по-другому. Предполагая, что input содержит ссылку на ваш node:

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

Вы можете использовать className:

input.className = "foo";

classList:

input.classList.add("foo");

setAttribute:

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

Первый из них широко поддерживается любым браузером, поэтому я настоятельно рекомендую этот вариант, если вы не находитесь в современном браузере и хотите манипулировать каждым классом, который вы установили, поэтому classList будет более полезным. Я сильно избегаю последнего, потому что с setAttribute вы должны установить атрибут HTML не имя класса объекта JS: тогда браузер отобразит это значение в свойство JS, но в некоторых случаях он будет терпеть неудачу (см. например, некоторые версии IE), поэтому класс не будет применяться, даже если HTML node будет иметь этот атрибут.

Обратите внимание, что все вышеприведенные методы работают, несмотря на то, что ссылка на HTML node получена, поэтому также:

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

И так далее.

В вашем случае, поскольку appendChild возвращает ссылку на добавленный node, вы также можете писать каждое в одном утверждении:

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

Надеюсь, что это поможет.

Ответ 2

Вам нужна переменная для созданного элемента.

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

Update:

.appendChild верните дочерний элемент, чтобы вы могли также сделать это без переменной:

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

Ответ 3

Используйте методы setAttribute и getAttribute:

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

Ответ 4

Как

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