Javascript 如何向appendChild创建的元素添加类

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

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

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

---

我只使用Javascript，不喜欢jQuery，请用纯Javascript发送答案。

您需要为创建的元素设置一个变量

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

---

使用setAttribute和getAttribute方法：

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

比如：

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

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

像任何其他元素一样，您也有一个引用。不管它是通过

createElement

在JS中创建的，还是通过另一种方式获得对节点的引用。假设

input

包含对节点的引用：

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

您可以使用：

:

:

第一种是任何浏览器都广泛支持的，因此我强烈建议使用它，除非您不在现代浏览器中，并且您希望操作您设置的每个类，因此

classList

将更有用。我极力避免使用后者，因为使用

setAttribute

将设置HTML属性而不是JS对象的类名：然后浏览器将该值映射到JS的属性，但在某些情况下会失败（例如，请参阅某些版本的IE）因此，即使HTML节点具有该属性，也不会应用该类

请注意，尽管如何获得

HTML

节点引用，但上述所有方法都有效，因此：

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

等等

在您的情况下，因为

appendChild

返回对所附加节点的引用，所以您还可以在一条语句中写入所有内容：

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

---

希望能有所帮助。

为什么会被否决？我正要发布相同的答案…@Downvoter你能解释一下怎么回事吗？嗯，我猜，因为向元素添加/删除属性的正确方法是通过setAttribute和getAttribute。对于类，我认为推荐的方法是不使用setAttribute。如果我想保留对已创建元素的引用，该怎么办？（输入）。我仍然可以在一行代码中创建整个内容吗？看看这个：@xdazz@dystroy是的，错过了，奇怪的是

appendChild

将返回child而不是元素本身。但这正是我们所问的，不是吗？“我现在不知道如何为我创建的输入元素添加一个类。”因此，

appendChild

将返回附加的子元素，在这种情况下，

input

one。几个具有信息性解释的解决方案=极好的答案<代码>类列表：正是我要找的。超级酷！：）

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

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

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