blocks|key|1506528|text|new_row.className+=+"aClassName";|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1506529|以下是关于MDN的更多信息：className|unstyled|offset|length|1506530|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/className^0|0|E|9|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>new_row.className = "aClassName";
</code></pre>

<p>Here's more information on MDN:  <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/className" rel="noreferrer">className</a></p>


blocks|key|1292035|text|使用.classList.add()方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1292036|​|1292037|const+element+=+document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);|code-block|syntax|javascript|1292038|<div+class="foo"></div>|1292039|1292040|此方法比覆盖className属性更好，因为它不会删除其他类，也不会在元素已有类的情况下添加类。|1292041|您还可以使用element.classList+(请参见the+MDN+documentation)切换或删除类。|1292042|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Element/classList^0|2|G|0|0|0|0|0|6|9|0|6|H|S|L|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|T|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>Use the <code>.classList.add()</code> method:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const element = document.querySelector('div.foo');
element.classList.add('bar');
console.log(element.className);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="foo"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>This method is better than overwriting the <code>className</code> property, because it doesn't remove other classes and doesn't add the class if the element already has it.</p>

<p>You can also toggle or remove classes using <code>element.classList</code> (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" rel="noreferrer">the MDN documentation</a>).</p>


blocks|key|1291997|text|这里是使用函数方法的工作源代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1291998|<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>|code-block|syntax|javascript|1291999|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is working source code using a function approach.</p>

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

    &lt;body&gt;
    &lt;div id="dd"&gt;&lt;/div&gt;
        &lt;script&gt;
            (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);
            })();
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|1292188|text|如果要创建大量元素，您可以创建自己的基本createElementWithClass函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1292189|function+createElementWithClass(type,+className)+{
++const+element+=+document.createElement(type);
++element.className+=+className
++return+element;
}|code-block|syntax|javascript|1292190|我知道这是非常基本的，但是能够调用下面的代码就不那么混乱了。|1292191|const+myDiv+=+createElementWithClass('div',+'some-class')|1292192|而不是大量的|1292193|+const+element1+=+document.createElement('div');
+element.className+=+'a-class-name'|1292194|再三。|1292195|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>If doing a lot of element creations, you can create your own basic createElementWithClass function.</p>
<pre><code>function createElementWithClass(type, className) {
  const element = document.createElement(type);
  element.className = className
  return element;
}
</code></pre>
<p>Very basic I know, but being able to call the following is less cluttering.</p>
<pre><code>const myDiv = createElementWithClass('div', 'some-class')
</code></pre>
<p>as opposed to a lot of</p>
<pre><code> const element1 = document.createElement('div');
 element.className = 'a-class-name'
</code></pre>
<p>over and over.</p>


blocks|key|1292250|text|如果您想在一个方法中创建多个元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1292251|​|1292252|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);|code-block|syntax|javascript|1292253|<link+rel="stylesheet"+href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"+integrity="sha384-B0vP5xmATw1%2BK9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2%2Bl"+crossorigin="anonymous">

<div+id="addHere"+class="text-center+mt-2"></div>|1292254|1292255|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>If you want to create multiple elements all with in one method.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function createElement(el, options, listen = [], appendTo){
    let element = document.createElement(el);
    Object.keys(options).forEach(function (k){
       element[k] = options[k];
    });
    if(listen.length &gt; 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);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;

&lt;div id="addHere" class="text-center mt-2"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1506657|text|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]);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1506658|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|1506721|text|这是更好的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1506722|let+new_row+=+document.createElement('div');
new_row.setAttribute("class",+"classname");
new_row.setAttribute("id",+"idname");|code-block|syntax|javascript|1506723|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is better way</p>
<pre><code>let new_row = document.createElement('div');
new_row.setAttribute(&quot;class&quot;, &quot;classname&quot;);
new_row.setAttribute(&quot;id&quot;, &quot;idname&quot;);
</code></pre>


blocks|key|1506672|text|var+new_row+=+document.createElement('div');

new_row.setAttribute("class",+"YOUR_CLASS");|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1506673|这将会起作用;-)|unstyled|1506674|source|offset|length|1506675|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/jsref/met_element_setattribute.asp^0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>var new_row = document.createElement('div');

new_row.setAttribute("class", "YOUR_CLASS");
</code></pre>

<p>This will work ;-)</p>

<p><a href="https://www.w3schools.com/jsref/met_element_setattribute.asp" rel="nofollow noreferrer">source</a></p>


blocks|key|1506643|text|同样值得一看的是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1506644|var+el+=+document.getElementById('hello');
if(el)+{
++++el.className+%2B=+el.className+?+'+someClass'+:+'someClass';
}|code-block|syntax|javascript|1506645|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It is also worth taking a look at:</p>

<pre><code>var el = document.getElementById('hello');
if(el) {
    el.className += el.className ? ' someClass' : 'someClass';
}
</code></pre>


blocks|key|1506777|text|<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1506778|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;script&gt;
    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);
    })
&lt;/script&gt;
</code></pre>


<p>How do I add a class for the <code>div</code>?</p>

<pre><code>var new_row = document.createElement('div');
</code></pre>


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

如何为div添加类var new_row = document.createElement('div');

问如何向JavaScript中的DOM元素添加类？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向JavaScript中的DOM元素添加类？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向JavaScript中的DOM元素添加类？
EN