如何向使用appendChild创建的元素添加类？

Question

我想问如何在JavaScript中使用appendChild创建元素后为其添加类？

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

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

我只使用JavaScript，不喜欢jQuery，请用纯JavaScript回答。

- Alfred Seattle

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

希望这可以帮助到您。

- ZER0

---

多种解决方案并附有详细的说明 = 绝佳答案！ - targumon

classList: 正是我在寻找的。超酷！ :) - robe007

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

- xdazz

---

为什么这个被踩了？我正准备发布相同的答案... - Denys Séguret

@Downvoter，您能解释一下问题在哪里吗？ - xdazz

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

对于这个类，我认为推荐的方式是不要使用setAttribute。 - Denys Séguret

如果我想保留所创建元素的引用（输入），那该怎么办？ 我仍然可以在一行代码中创建整个内容吗？ - Kokodoko

Answer 3

使用 setAttribute 和 getAttribute 方法：

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

- Geuis

---

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

Answer 4

例如：

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

- Kernel James

---

@xdazz 我不这么认为 - Denys Séguret

@dystroy 是的，我错过了那个，appendChild 返回子元素而不是元素本身很奇怪。 - xdazz

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