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

Question

我想问一下如何在javascript中为appendChild创建的元素添加一个类

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

如何为我创建的输入元素添加一个类？

我只是使用Javascript而且我不喜欢jQuery,请在纯javascript中发送答案.

Answer 1

我想问一下如何在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你要设置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";