JavaScriptでリストアイテムを追加するときにクラスを追加する方法は？

Question

私は複数のリスト項目を持つ順序のないリストグループを持っています。私はそれは、クラスなしで追加の新しいリストアイテムを追加するとき

これらのリストの各項目は、しかし

をクラスのリストグループ・アイテム」を持っています。

クラスを追加することはできますか？あなたは複数のクラスを持つ要素を台無しにしたい場合は

Answer 1

注リスト項目のすべてが、すべてのクラスを持つ= 'リスト・グループ・アイテムの

から「グリーン」テキストの色を持っていることを、強くjQueryのを使用することをお勧めしますaddClass（）/ removeClass（）https://api.jquery.com/category/manipulation/class-attribute/

var adder = document.getElementById('adder') 
 
var list = document.getElementsByTagName('ul')[0]; 
 
adder.addEventListener('click', function(){ 
 
var node = document.createElement("li"); 
 
node.innerHTML = "bananas" 
 
node.className = 'list-group-item'; 
 
list.appendChild(node); 
 
});

.list-group-item{ 
 
    color: green; 
 
}

<ul> 
 
<li class="list-group-item">apples</li> 
 
<li class="list-group-item">oranges</li> 
 
<li class="list-group-item">peaches</li> 
 
</ul> 
 
    
 
<button id='adder'> add bananas </button>

Answer 2

これを試してみてください：

var ul = document.getElementById("my-ul"); 
 
var li = document.createElement("li"); 
 
li.appendChild(document.createTextNode("Item 4")); 
 
li.setAttribute("class", "list-group-item") 
 
ul.appendChild(li);

<ul id="my-ul"> 
 
    <li class="list-group-item">Item 1</li> 
 
    <li class="list-group-item">Item 2</li> 
 
    <li class="list-group-item">Item 3</li> 
 
</ul>