如何用纯JavaScript设置DOM文本？UL元素文本设置难题求助

兄弟，我太懂你这种头疼了——直接给UL赋值textContent、innerText或者innerHTML确实会把所有子元素都覆盖掉，因为这些属性本质是替换元素的全部内容，不管原来有没有子节点。不用非得折腾appendChild(TextNode)，有更简单的办法：

1. 直接在UL的指定位置添加文本（最推荐） #

用insertAdjacentText()方法，它可以直接在元素的指定位置插入文本，完全不会影响现有子元素，连文本节点都不用手动创建：

// 把文本加到UL内部的最后面（子元素之后）
document.getElementById("DropDown").insertAdjacentText('beforeend', '你要加的文本');

它支持4个位置参数，按需选就行：

• 'beforebegin'：在UL元素本身的前面插入
• 'afterbegin'：在UL内部的最前面插入（子元素之前）
• 'beforeend'：在UL内部的最后面插入（子元素之后）
• 'afterend'：在UL元素本身的后面插入

2. 替换UL里已有的文本节点（保留子元素） #

如果你的UL里本来就有文本节点，只是想修改它的内容而保留<li>子元素，可以遍历UL的childNodes找到文本节点（nodeType为3的节点），直接修改它的textContent：

const ul = document.getElementById("DropDown");
for (const node of ul.childNodes) {
  // 找到文本节点就修改内容
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = "新的文本内容";
    break; // 找到第一个就停止，需要修改多个就去掉break
  }
}

补充：简化版的appendChild写法 #

如果你还是想用appendChild，其实也不用特意保存文本节点的引用，一行就能搞定：

document.getElementById("DropDown").appendChild(document.createTextNode('你要加的文本'));

本质上，你之前踩坑的原因是：textContent/innerText/innerHTML会清空元素的所有子节点，然后替换成你设置的内容，所以子元素自然就消失了。而上面的方法都是在不破坏现有子节点的前提下操作文本~

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