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

第一个被任何浏览器广泛支持，所以我强烈建议除非您不在现代浏览器中且想要操作您设置的每个类，因此classList将更有用。我强烈避免使用后者，因为使用setAttribute你将设置HTML的属性而不是JS对象的类名：然后浏览器会将该值映射到JS的属性，但在某些情况下它会失败（例如，参见某些版本的IE），即使HTML节点具有该属性，也不会应用该类。

请注意，尽管如何获得HTML节点引用，但上述所有方法仍然有效，因此：

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

等等。

在您的情况下，因为appendChild返回对附加节点的引用，您还可以在一个语句中编写所有内容：

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

Answer 4

像：

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

如何将类添加到由appendChild创建的元素

4 个答案: