如何使用JavaScript在UL的每个Text Node之间添加换行

你现有代码的核心问题是没有在每次点击按钮时创建新的<li>实例，复用全局同一个Li元素的情况下，每次调用ul.appendChild(Li)只会将已存在的这个Li移动到列表末尾，不会生成新的列表节点，自然无法出现多个节点之间的换行效果。另外<li>本身就是默认块级元素，不需要额外设置display: block属性。

基础修正实现 #

btn.onclick = function () {
  // 每次点击创建新的li元素
  const Li = document.createElement('li');
  const text = optionField.value;
  Li.appendChild(document.createTextNode(text));
  ul.appendChild(Li);
};

如果你的项目有特殊样式将li设置为了行内/行内块级元素，需要额外控制换行的话，可选两种方案：

• 方案1：通过CSS统一控制（更推荐，样式与逻辑分离）

ul li {
  display: block;
  /* 可额外加上下边距调整节点间距 */
  margin: 3px 0;
}

• 方案2：在JS中手动追加换行节点

btn.onclick = function () {
  const Li = document.createElement('li');
  Li.textContent = optionField.value;
  ul.appendChild(Li);
  // 追加换行节点
  ul.appendChild(document.createElement('br'));
};

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