Question

我有一个包含多个列表项的无序列表组。

每个列表项都有一个类＆＃39; list-group-item＆＃39;

但是，当我添加新的列表项时，它会在没有类的情况下附加。

是否可以为其添加课程？

Answer 1

请注意，所有列表项都有绿色＆＃39;所有具有class =＆＃39; list-group-item＆＃39;

的文本颜色

如果你想搞乱多个类的元素，强烈建议使用jQuery addClass（）/ removeClass（）https://api.jquery.com/category/manipulation/class-attribute/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

如何在JavaScript中追加列表项时添加类？

2 个答案: