点击按钮动态添加Bootstrap 4列表项的实现方法求助

嘿，这事儿很好解决！你现在新增的列表项之所以样式不对，核心原因就是没给动态创建的<li>元素加上Bootstrap列表项必需的list-group-item类——你看页面里硬编码的那些<li>都带着这个类对吧？

只需要在JS代码里，创建完<li>元素后补上这个样式类就行，给你两种常用的实现方式：

方法1：用classList.add()（推荐） #

这个方法不会覆盖元素可能存在的其他类，灵活性更高：

var button = document.getElementById("enter");
var input = document.getElementById("userinput");
var ul = document.querySelector("ul");

button.addEventListener("click", function() {
  var li = document.createElement("li");
  // 关键：添加Bootstrap列表项样式类
  li.classList.add('list-group-item');
  li.appendChild(document.createTextNode("testing"));
  ul.appendChild(li);
})

方法2：直接设置className #

如果确定这个<li>不会需要其他样式类，也可以直接赋值：

li.className = 'list-group-item';

这样修改后，点击按钮新增的列表项就会和原有项的样式完全统一啦！

另外提前给你提一嘴，等你要实现输入内容功能的时候，只需要把"testing"换成input.value就行，比如：

li.appendChild(document.createTextNode(input.value));

内容的提问来源于stack exchange，提问作者Joseph Romero