如何在 JavaScript 中向 DOM 元素添加类?

Posted

技术标签:

【中文标题】如何在 JavaScript 中向 DOM 元素添加类?【英文标题】:How can I add a class to a DOM element in JavaScript? 【发布时间】:2010-11-10 01:28:09 【问题描述】:

如何为div 添加一个类?

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

【问题讨论】:

太糟糕了,规范不允许将类指定为 createElement 的参数。 如果您想添加一个类而不删除其他类参见this answer 【参考方案1】:

这个答案是很久以前写的/被接受的。从那时起,已经提交了更好、更全面的示例答案。您可以通过向下滚动找到它们。以下是为后代保留的原始接受答案。


new_row.className = "aClassName";

这里有更多关于 MDN 的信息:className

【讨论】:

设置多个类名怎么样? @Sponge new_row.className = "aClassName1 aClassName2"; 它只是一个属性,你可以指定任何你喜欢的字符串,即使它是无效的html 我也推荐new_row.classList.add('aClassName');,因为你可以添加多个类名 @StevenTsooo 请注意,classList 在 IE9 或更低版本中是 unsupported。 有没有办法在一行代码中创建一个具有类名的元素 - 并且仍然获得对该元素的引用?例如:myEL = document.createElement('div').addClass('yo')' 将不起作用。【参考方案2】:

使用.classList.add() 方法:

const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);
<div class="foo"></div>

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

您还可以使用element.classList 切换或删除类(请参阅the MDN documentation)。

【讨论】:

【参考方案3】:

这是使用函数方法的工作源代码。

<html>
    <head>
        <style>
            .newspadding: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>

【讨论】:

所以?举个例子,没有错。 Re"while created":你的意思是"while being created"吗?回复editing your answer,不在 cmets 中。提前致谢。 解释一下。例如,您所说的“函数方法”是什么意思?您能否详细说明(editing your answer,不在 cmets 中)?提前致谢。【参考方案4】:

javascript 中向 DOM 元素添加类的三种方法

有多种方法可以做到这一点。我将向您展示三种添加类的方法,并阐明每种方法的一些好处。

您可以使用任何给定的方法将类添加到您的元素,这是检查、更改或删除它们的另一种方式。

    className 方式 - 添加单个或多个类以及删除或更改所有类的简单方法。 classList方式——操作类的方式;同时添加、更改或删除一个或多个类。它们可以随时在您的代码中轻松更改。 DOM 方式 - 当根据 DOM 模型编写代码时,这会提供类似于 className 方式的更简洁的代码和功能。

类名方式

这是一种简单的方法,将所有类存储在一个字符串中。字符串可以轻松更改或附加。

// Create a div and add a class
var new_row = document.createElement("div");
new_row.className = "aClassName";

// Add another class. A space ' ' separates class names
new_row.className = "aClassName anotherClass";
// Another way of appending classes 
new_row.className = new_row.className + " yetAClass";

如果一个元素有一个类,检查它很简单:

// Checking an element with a single class
new_row.className == "aClassName" ;
if ( new_row.className == "aClassName" )
    // true

删除所有类或更改它们非常容易

// Changing all classes
new_row.className = "newClass";

// Removing all classes
new_row.className = "";

在使用多个类时搜索或删除单个类很困难。您需要将 className 字符串拆分为一个数组,逐一搜索它们,删除您需要的字符串并将所有其他字符串添加回您的元素。 classList 方式解决了这个问题,即使类被设置为 className 方式也可以使用。

classList方式

当你需要的时候很容易操作类。您可以根据需要添加、删除或检查它们!它可以与单个或多个类一起使用。

// Create a div and add a class
var new_row = document.createElement("div");
new_row.classList.add( "aClassName" );

// Add another class
new_row.classList.add( "anotherClass" );
// Add multiple classes
new_row.classList.add( "yetAClass", "moreClasses", "anyClass" );

// Check for a class
if ( new_row.classList.contains( "anotherClass" ) )
    // true

// Remove a class or multiple classes
new_row.classList.remove( "anyClass" );
new_row.classList.remove( "yetAClass", "moreClasses" );

// Replace a class
new_row.classList.replace( "anotherClass", "newClass" );

// Toggle a class - add it if it does not exist or remove it if it exists
new_row.classList.toggle( "visible" );

删除所有类或更改为单个类更容易以 className 方式完成。

DOM 方式

如果您以 DOM 方式编写代码,这看起来更简洁,并且通过设置类属性将类存储在字符串中。

// Create a div, add it to the documet and set class
var new_row = document.createElement( "div" );
document.body.appendChild( new_row );
new_row.setAttribute( "class", "aClassName anotherClass" );

// Add some text
new_row.appendChild( document.createTextNode( "Some text" ) );

// Remove all classes
new_row.removeAttribute( "class" );

单个类被使用时,检查一个类很简单

// Checking when a single class is used
if ( new_row.hasAttribute( "class" ) 
    && new_row.getAttribute( "class" ) == "anotherClass" )
    // true

在使用多个类时检查或删除单个类使用与 className 方式相同的方法。但是 classList 方式更容易做到这一点并且可以使用,即使您将其设置为 DOM 方式。

【讨论】:

【参考方案5】:

如果要创建大量元素,您可以创建自己的基本 createElementWithClass 函数。

function createElementWithClass(type, className) 
  const element = document.createElement(type);
  element.className = className
  return element;

我知道的很基本,但是能够调用以下内容就不那么混乱了。

const myDiv = createElementWithClass('div', 'some-class')

相对于很多

 const element1 = document.createElement('div');
 element.className = 'a-class-name'

一遍又一遍。

【讨论】:

【参考方案6】:

如果您想用一种方法创建多个元素。

function createElement(el, options, listen = [], appendTo)
    let element = document.createElement(el);
    Object.keys(options).forEach(function (k)
       element[k] = options[k];
    );
    if(listen.length > 0)
        listen.forEach(function(l)
           element.addEventListener(l.event, l.f);
        );
    
    appendTo.append(element);



let main = document.getElementById('addHere');
createElement('button', id: 'myBtn', className: 'btn btn-primary', textContent: 'Add Alert', [
  event: 'click',
  f: function()
    createElement('div', className: 'alert alert-success mt-2', textContent: 'Working' , [], main);
  
], main);
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div id="addHere" class="text-center mt-2"></div>

【讨论】:

【参考方案7】:
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]);

【讨论】:

请考虑解释您发布此内容的原因,这将有助于其他人学习。 投了赞成票,因为这是原生 JavaScript/vanilla JavaScript,不需要任何其他库或框架。 解释一下。【参考方案8】:

这是更好的方法

let new_row = document.createElement('div');
new_row.setAttribute("class", "classname");
new_row.setAttribute("id", "idname");

【讨论】:

【参考方案9】:

跨浏览器解决方案

注意:Internet Explorer 9 不支持classList 属性。以下代码适用于所有浏览器:

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

来源:how to js add class

【讨论】:

【参考方案10】:
var new_row = document.createElement('div');

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

这会起作用 ;-)

source

【讨论】:

这不是一个好的解决方案,因为这种方法不适用于所有浏览器。目前只有 60% 的浏览器支持 setAttribute。 caniuse.com/#search=setAttribute【参考方案11】:

也值得一看:

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

【讨论】:

解释一下。【参考方案12】:

如果您想创建一个新的输入字段,例如 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"

输出将是:&lt;input type="file" class="w-95 mb-1"&gt;


如果你想使用 JavaScript 创建嵌套标签,最简单的方法是使用innerHtml

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

输出将是:

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

【讨论】:

【参考方案13】:
<script>
    document.getElementById('add-Box').addEventListener('click', function (event) 
        let itemParent = document.getElementById('box-Parent');
        let newItem = document.createElement('li');
        newItem.className = 'box';
        itemParent.appendChild(newItem);
    )
</script>

【讨论】:

以上是关于如何在 JavaScript 中向 DOM 元素添加类?的主要内容,如果未能解决你的问题,请参考以下文章

在 React 中向 DOM 添加新元素

MySQL:如何在查询中向日期时间字段添加一天

JavaScript基础语法-DOM,前端小白必知必会

在Android应用程序中向GridView添加一组按钮

如何使用jasmine使用DOM元素测试JavaScript?

如何在 DOM(javascript 或 jquery)中显示元素的值?