Javascript 创建元素时添加类

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

var divElement = document.createElement('div') 

应该回来

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

编辑：

我不想在创建另一个文档时重复添加类。使用className或setAttribute创建元素'div'。我应该写document.createElement'div'，它应该在将来添加类

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

您可以使用

你可以用

---

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

divElement.className = 'foo';

如下所示：

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

divElement.className = 'foo';

document.body.appendChild(divElement);

使用预定义函数减少重复：

---

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

divElement.className = 'foo';

如下所示：

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

divElement.className = 'foo';

document.body.appendChild(divElement);

使用预定义函数减少重复：

---

您可以添加如下属性：divElement.className='foo'

u可以添加类似于divElement.className='foo'的属性

使用.className：

参考文献

use.className：

参考文献

---

您可以使用函数来避免重复

var createDiv=函数{ var div=document.createElement'div'； div.className='what ever class'； 返回div； }; console.logcreateDiv； console.logcreateDiv；

---

打开控制台…您可以使用该功能避免重复

var createDiv=函数{ var div=document.createElement'div'； div.className='what ever class'； 返回div； }; console.logcreateDiv； console.logcreateDiv； 打开控制台……试试这个

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

试试这个

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

---

如果您想要覆盖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来隔离闭包中的原始元素

我们需要对document.createElement进行绑定，因为该函数需要文档上下文

此函数设计为在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');

---

如果您想要覆盖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来隔离闭包中的原始元素

我们需要对document.createElement进行绑定，因为该函数需要文档上下文

此函数设计为在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');

---

对不起，伙计，我不太明白问题的更新。您可以在任何需要的地方添加类名。@Harry可以只通过文档添加默认类。createElement'div'我不知道mate。您可能可以使用一个函数并在需要时调用它？您是否尝试创建一个函数来创建一个具有您想要的类名的div。如下所示：函数createDivclsName{var div=document.createElement'div'；div.className=clsName；return div；}@WillWang是的，这很有效。但是，我正在寻找不同的解决方案。我们可以在document.createElement处更改吗？抱歉，伙计，我不太理解问题的更新。您可以在任何需要的地方添加类名。@Harry可以只通过文档添加默认类。createElement'div'我不知道mate。您可能可以使用一个函数并在需要时调用它？您是否尝试创建一个函数来创建一个具有您想要的类名的div。如下所示：函数createDivclsName{var div=document.createElement'div'；div.className=clsName；return div；}@WillWang是的，这很有效。但是，我正在寻找不同的解决方案。我们可以在document.createElement进行更改吗？