Question

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

var divElement = document.createElement('div')

应该返回

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

修改

每当我使用className或setAttribute创建另一个document.createElement('div')时，我都不想重复添加Class。我应该写document.createElement('div')，它应该在将来添加类。

我们可以在document.createElement上更改并执行吗？

Answer 1

如果你想覆盖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;
    };
}());

关于此的几点说明：

我们使用IIFE来隔离闭包内的original_createElement。
我们需要在bind上执行document.createElement，因为该功能需要document上下文。
此功能旨在用于document.createElement('div', 'foo')。如果您确实希望将foo添加到您将来创建的每个元素中，请删除cls参数并改为elt.className = 'foo';。

但无论如何我根本不建议这样做。

相反，如评论和其他答案中所述，定义您自己的功能：

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');

Answer 2

在追加子项之前，您应该在代码中添加以下行。这会将类添加到刚刚创建的元素中。

divElement.className = 'foo';

如下所示：

var divElement = document.createElement('div') ;

divElement.className = 'foo';

document.body.appendChild(divElement);

Fiddle Demo

使用预定义的功能减少重复：

function appendDefaultDiv(){
    var divElement = document.createElement('div') ;

    divElement.className = 'foo';
    divElement.innerHTML = "Some Text";

    return divElement;
}


document.body.appendChild(appendDefaultDiv());

Fiddle Demo 2

Answer 3

您可以使用.className

var divElement = document.createElement('div');
divElement.className = 'foo';

Demo

Answer 4

使用.className：

var divElement = document.createElement('div');
    divElement.className = 'foo';

<强>参考

https://developer.mozilla.org/en-US/docs/Web/API/Element.className

Answer 5

您可以使用功能来避免重复。

＆＃13;

var createDiv = function() {
  var div = document.createElement('div');
  div.className = 'what-ever-class';
  return div;
};

console.log(createDiv());
console.log(createDiv());

＆＃13;

Open console ....

＆＃13;

Answer 6

你可以添加这样的属性divElement.className =＆＃39; foo＆＃39;;

Answer 7

var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
div.id="vik";
div.setAttribute('id', 'myid');
div.setAttribute('class', 'myclass');

document.body.appendChild(div);

Answer 8

试试这个......

var $div = $("<div>", {class: "foo"});
$("body").append($div);

创建元素时添加类

8 个答案:

Demo