253

如何为新增课程div？

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

javascript dom

— 哇
source

6

遗憾的是，规范不允许将类指定为createElement的参数。

— ʀʀʏ

如果要添加一个类而不删除其他类，请参见此答案。

— 米哈尔Perłakowski

447

new_row.className = "aClassName";

这是有关MDN的更多信息： className

— 达科Z
source

5

设置多个类名该怎么办？

— 西蒙

5

@Sponge new_row.className = "aClassName1 aClassName2";仅是一个属性，即使它导致无效的html，也可以分配任何您喜欢的字符串

— Darko Z

16

我还建议new_row.classList.add('aClassName');您添加多个类名

— StevenTsooo 2014年

@StevenTsooo注意，classList是不支持在IE9或更低。

— dayuloli 2015年

有没有一种方法可以在一行代码中创建一个具有类名的元素-并且仍然获得对该元素的引用？例如：myEL = document.createElement（'div'）。addClass（'yo'）'将不起作用。

— Kokodoko

36

使用.classList.add()方法：

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);

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

展开摘要

此方法比覆盖className属性更好，因为它不会删除其他类，并且如果元素已经具有该类也不会添加该类。

您也可以使用切换或删除类element.classList（请参见MDN文档）。

— MichałPerłakowski
source

28

这是使用函数方法的有效源代码。

<html>
    <head>
        <style>
            .news{padding:10px; margin-top:2px;background-color:red;color:#fff;}
        </style>
    </head>

    <body>
    <div id="dd"></div>
        <script>
            (function(){
                var countup = this;
                var newNode = document.createElement('div');
                newNode.className = 'textNode news content';
                newNode.innerHTML = 'this created div contains a class while created!!!';
                document.getElementById('dd').appendChild(newNode);
            })();
        </script>
    </body>
</html>

— 阳光SM
source

8

所以？它只是一个例子，这没有错。

— 凯里2015年

关于“创建时”：您是说“正在创建时”吗？通过编辑您的答案来回应，而不是在评论中。提前致谢。

— Peter Mortensen

一个解释将是有条理的。例如，“功能方法”是什么意思？您能否详细说明（通过编辑答案，而不是在评论中）？提前致谢。

— Peter Mortensen

15

在JavaScript中，还有DOM方式可以做到这一点：

// Create a div and set class
var new_row = document.createElement("div");
new_row.setAttribute("class", "aClassName");
// Add some text
new_row.appendChild(document.createTextNode("Some text"));
// Add it to the document body
document.body.appendChild(new_row);

— 哈斯·比约克（HasseBjörk）
source

2

var newItem = document.createElement('div');
newItem.style = ('background-color:red'); 
newItem.className = ('new_class');
newItem.innerHTML = ('<img src="./profitly_files/TimCover1_bigger.jpg" width=50 height=50> some long text with ticker $DDSSD');
var list = document.getElementById('x-auto-1');
list.insertBefore(newItem, list.childNodes[0]);

— 迭戈·斯林格（Diego Slinger）
source

2

考虑解释您为什么发布此内容，这将有助于其他人学习。

— Thomas Smyth

之所以投票，是因为这是本机JavaScript /原始JavaScript，不需要任何其他库或框架。

— obotezat

一个解释将是有条理的。

— Peter Mortensen

1

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

new_row.setAttribute("class", "YOUR_CLASS");

这将起作用;-)

资源

— 佩德罗程序员
source

这不是一个好的解决方案，因为这种方法不适用于所有浏览器。目前仅60％的浏览器支持setAttribute。caniuse.com/#search=setAttribute

— 拉格

0

还值得一看：

var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}

— 约尼
source

一个解释将是有条理的。

— Peter Mortensen

0

如果要使用以下示例创建新的输入字段，请file输入：

 // Create a new Input with type file and id='file-input'
 var newFileInput = document.createElement('input');

 // The new input file will have type 'file'
 newFileInput.type = "file";

 // The new input file will have class="w-95 mb-1" (width - 95%, margin-bottom: .25rem)
 newFileInput.className = "w-95 mb-1"

输出将是： <input type="file" class="w-95 mb-1">

如果要使用JavaScript创建嵌套标签，最简单的方法是使用innerHtml：

var tag = document.createElement("li");
tag.innerHTML = '<span class="toggle">Jan</span>';

输出将是：

<li>
    <span class="toggle">Jan</span>
</li>

— 迈尔·米娅托维奇
source

0

跨浏览器解决方案

注意：Internet Explorer 9classList不支持该属性。以下代码将在所有浏览器中运行：

function addClass(id,classname) {
  var element, name, arr;
  element = document.getElementById(id);
  arr = element.className.split(" ");
  if (arr.indexOf(classname) == -1) { // check if class is already added
    element.className += " " + classname;
  }
}

addClass('div1','show')

来源：如何js添加类

— 拉维·马克瓦纳（Ravi Makwana）
source

-3

这也将起作用。

$(document.createElement('div')).addClass("form-group")

— 穆罕默德·阿威斯
source

5

仅当您使用jQuery时。

— 丹阮

1

感谢您的发布，这对我有用，我需要一个jquery解决方案。

— midknyte

如何在JavaScript中将类添加到DOM元素？

跨浏览器解决方案