如何使用JavaScript向<ul>添加子<li>元素且不删除原有子元素

问题原因排查 #

你现有代码存在两个核心问题，也是导致原有列表项丢失的根本原因：

• appendChild() 方法仅接受DOM节点对象作为入参，你传入字符串'someListItemICreated'本身属于非法调用，正常会直接抛出类型错误。如果实际运行时未报错但原有项被移除，大概率是你创建列表项的逻辑错误使用了innerHTML直接赋值覆盖了ul的全部内容。
• 如果你复用了同一个DOM节点对象多次调用appendChild()，该节点只会被移动位置，不会重复插入，也不会导致原有节点丢失，优先排查是否存在ul.innerHTML = 'xxx'这类覆盖式写法。

正确实现方式 #

单次插入单个列表项 #

// 1. 新建独立的li DOM节点
const newListItem = document.createElement('li')
// 2. 配置节点内容/属性/事件
newListItem.textContent = '新列表项内容'
// 3. 插入到ul末尾，完全不影响原有节点
document.getElementById('my-list').appendChild(newListItem)

迭代批量插入多个列表项 #

推荐使用文档碎片优化性能，仅触发一次页面重绘：

const listFragment = document.createDocumentFragment()
// 待插入的列表项内容数组
const toAddItems = ['item3', 'item4', 'item5']

toAddItems.forEach(itemText => {
  // 每次循环都创建全新的li节点
  const li = document.createElement('li')
  li.textContent = itemText
  listFragment.appendChild(li)
})

// 一次性插入所有节点
document.getElementById('my-list').appendChild(listFragment)

字符串形式插入的兼容写法 #

如果你需要直接用HTML字符串插入，使用insertAdjacentHTML即可避免销毁原有DOM：

// beforeend表示插入到元素内部的末尾位置
document.getElementById('my-list').insertAdjacentHTML('beforeend', '<li>新列表项</li>')

避坑注意 #

不要使用document.getElementById('my-list').innerHTML += '<li>xxx</li>'的写法，该写法会先销毁ul内所有现有DOM节点再重建，原有li绑定的事件监听器会全部丢失，性能也远低于节点插入方案。

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