堆棧內存溢出
  簡體   English   中英

如何將 class 添加到 JavaScript 中的 DOM 元素？

[英]How can I add a class to a DOM element in JavaScript?

 原文  2009-07-12 04:29:47  6   12    javascript/ dom

問題描述

如何為div添加 class ？

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

12 個解決方案

解決方案1
 551 已采納  2009-07-12 04:30:48

new_row.className = "aClassName";

這里有更多關於 MDN 的信息： className

解決方案2
 55  2015-12-27 14:46:23

使用.classList.add()方法： 

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

此方法比覆蓋className屬性要好，因為它不會刪除其他類，並且如果元素已經具有該類，則不會添加該類。

您還可以使用element.classList切換或刪除類（請參閱MDN 文檔）。

解決方案3
 34  2015-07-15 13:05:33

這是使用函數方法的工作源代碼。

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

解決方案4
 22  2016-02-28 06:52:49

有多種方法可以做到這一點。 我將向您展示三種添加類的方法並闡明每種方法的一些好處。

您可以使用任何給定的方法向元素添加類，這是檢查、更改或刪除它們的另一種方法。

  1. className方式 - 添加單個或多個類並刪除或更改所有類的簡單方法。
  2. classList方式 - 操作類的方式； 同時添加、更改或刪除單個或多個類。 它們可以隨時在您的代碼中輕松更改。
  3. DOM方式 - 當根據 DOM 模型編寫代碼時，這提供了類似於 className 方式的更清晰的代碼和功能。

通過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";

如果一個元素只有一個 class ，檢查它很簡單：

// 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方式編寫代碼，這看起來更清晰，並通過設置 class 屬性將類存儲在字符串中。

// 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
 5  2021-01-07 19:53:39

如果要創建很多元素，您可以創建自己的基本 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
 4  2021-02-03 19:09:17

如果您想用一種方法創建多個元素。 

 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, lf); }); } 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
 3  2017-12-02 18:30:55

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

解決方案8
 2  2020-10-15 21:02:28

這是更好的方法

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

解決方案9
 1  2020-01-29 10:21:15

跨瀏覽器解決方案

注意： 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')

來源： js如何添加類

解決方案10
 1  2020-02-02 13:43:23

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

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

這將工作;-)

來源

解決方案11
 0  2016-02-24 16:47:46

也值得一看：

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

解決方案12
 0  2019-02-15 17:35:21

如果要創建一個新的輸入字段，例如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>

解決方案13
 0  2021-01-25 10:01:01

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

解決方案14
 -4  2017-10-03 06:45:05

這也行。 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何在 DOM 元素中添加 javascript Class 的實例 如果DOM元素包含類，我如何檢入JavaScript？ 如何使用 javascript 添加元素 class？ OO Javascript - 我應該讓一個類將自己添加到DOM中還是讓它返回一個元素然后添加到DOM中？ 如何在純 JavaScript 中向元素添加和刪除活動類 如何使用 JavaScript 添加類的元素 如何通過 javascript 元素的 class 添加所有值？ 如何通過 javascript 將引導程序 class 添加到“按鈕”元素？ 如何使用javascript將類添加為元素的字符串？ 如何使用Jquery或Javascript定位Appended元素，或者如何將該附加元素添加到DOM？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM