javascript - 创建元素时添加类

我希望在创建div元素时添加一个类。

var divElement = document.createElement('div')

应该回来

<div class="foo"></div>

编辑：
我不想在使用className或setAttribute创建另一个document.createElement('div')时重复添加类。我应该写document.createElement('div')并且它应该在将来添加类。
我们可以在document.createElement更改并执行吗？

最佳答案

如果您想覆盖document.createElement的行为--真的，真的想--那么：

document.createElement = (function() {
    var original_createElement = document.createElement.bind(document);
    return function(tagName, cls) {
        var elt = original_createElement(tagName);
        elt.className = cls;
        return elt;
    };
}());

关于这件事的几个注意事项：
我们使用生命周期来分离闭包内的original_createElement。
我们需要对bind执行document.createElement操作，因为该函数需要document上下文。
此函数设计为在document.createElement('div', 'foo')中使用。如果您真的非常希望foo被添加到以后创建的每个元素中，那么删除cls参数并改为执行elt.className = 'foo';操作。
但无论如何我不建议这么做。
相反，如注释和其他答案中所述，定义您自己的函数n：

function createElementWithClassFoo() {
    var div = document.createElement('div');
    div.classList.add('foo');
    return div;
}

或将其推广到任何类：

function createElementWithClass(cls) {
    var div = document.createElement('div');
    div.classList.add(cls);
    return div;
}

然后打电话

var divElement = createElementWithClassFoo();
var divElement = createElementWithClass('foo');

关于javascript - 创建元素时添加类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26771764/