如何将类添加到由 appendChild 创建的元素 [重复]

Posted 2023-05-09

【中文标题】如何将类添加到由 appendChild 创建的元素 [重复]

【英文标题】：How to add class to an element create by appendChild [duplicate]

【发布时间】：2012-09-16 15:59:33

【问题描述】：

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

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

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

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

【参考方案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 返回对附加节点的引用，您也可以在一个语句中编写everyting：

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

希望对你有帮助。

【讨论】：

几种解决方案，提供翔实的解释 = 很好的答案！

classList：正是我想要的。超酷 ！ :)

【参考方案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";

【讨论】：

为什么这被否决了？我正要发布相同的答案...

@Downvoter 你能解释一下怎么回事吗？

嗯，我猜是因为向元素添加/删除属性的正确方法是通过 setAttribute 和 getAttribute。

对于类，我认为推荐的方式是不使用setAttribute。

如果我想保留对创建元素的引用怎么办？ （输入）。我还能在一行代码中创建整个东西吗？

【参考方案3】：

使用 setAttribute 和 getAttribute 方法：

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

【讨论】：

看这个：tgerm.com/2009/02/javascript-ie-setattributeclass-or.html

【参考方案4】：

喜欢：

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

【讨论】：

@xdazz I don't think so

@dystroy 是的，错过了，奇怪的是appendChild 将返回 child 而不是元素 self。

但这正是被问到的，不是吗？ “我现在不知道如何为我创建的输入元素添加一个类。” 因此，appendChild 将返回附加的子元素，在这种情况下是 input 的。