Javascript 如何将类添加到由 appendChild 创建的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12577797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add class to an element create by appendChild
提问by Alfred Seattle
I want to ask how to add a class for an element I create by appendChild in javascript
我想问一下如何为我在javascript中通过appendChild创建的元素添加一个类
document.forms[0].appendChild(document.createElement("input"));
How to add a class for the input element I created?
如何为我创建的输入元素添加一个类？
I just use Javascript and I don't like jQuery, please send answer in pure javascript.
我只使用 Javascript，我不喜欢 jQuery，请用纯 javascript 发送答案。
回答by ZER0
I want to ask how to add a class for an element I create by appendChild in javascript
我想问一下如何为我在javascript中通过appendChild创建的元素添加一个类
Like any other element you have a reference. It doesn't matter if it's created in JS via createElement, or you obtained a reference to the node in another way. Assuming inputcontains the reference to your node:
像任何其他元素一样，您有一个参考。它是通过 JS 在 JS 中创建的createElement，或者您以其他方式获得对节点的引用都没有关系。假设input包含对您的节点的引用：
var input = document.createElement("input");
You can either use className:
您可以使用className：
input.className = "foo";
类列表：
input.classList.add("foo");
设置属性：
input.setAttribute("class", "foo");
The first one is widely supported by any browser, so I strongly suggest that one unless you're not in a modern browser and you want to manipulate each class you set, so classListwill be more useful. I strongly avoid the latter, because with setAttributeyou're going to set the HTML's attribute not the class name of the JS object: then the browser will map that value to the JS's property but in some cases it will fails (see, for instance, some versions of IE) so the class won't be applied even if the HTML node will have that attribute.
第一个被任何浏览器广泛支持，所以我强烈建议除非你不是在现代浏览器中并且你想要操作你设置的每个类，classList否则会更有用。我强烈避免使用后者，因为setAttribute您将设置 HTML 的属性而不是 JS 对象的类名：然后浏览器将该值映射到 JS 的属性，但在某些情况下它会失败（例如，请参阅IE 的某些版本），因此即使 HTML 节点具有该属性，也不会应用该类。
Notice that all the methods above are working despite how to HTMLnode reference is obtained, so also with:
请注意，尽管HTML获得了节点引用，但上述所有方法都有效，因此也可以使用：
var input = document.getElementById("my-input");
And so on.
等等。
In your case, because appendChildreturns the reference to the node appended, you can also write everyting in one statement:
在您的情况下，因为appendChild返回对附加节点的引用，您还可以在一个语句中编写所有内容：
document.forms[0]
.appendChild(document.createElement("input"))
.className = "foo";
Hope it helps.
希望能帮助到你。
回答by xdazz
You need a variable for the created element.
您需要一个用于创建元素的变量。
var input = document.createElement("input");
input.className = 'class_to_add';
document.forms[0].appendChild(input);
Update:
更新：
.appendChildreturn the child, so you could also do it with out a variable:
.appendChild返回孩子，所以你也可以不用变量来做：
document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";
回答by Geuis
Use the setAttribute and getAttribute methods:
使用 setAttribute 和 getAttribute 方法：
var i = document.createElement('input');
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);
回答by Kernel James
Like:
喜欢：
document.forms[0].appendChild(document.createElement("input")).className = "class_to_add";
