如何在纯 JavaScript 中设置 dom 的文本？

Question

如何在纯javascript中设置dom的文本？我想设置 ul 对象的文本值。所以我在下面尝试。

getElementByID("DropDown").textContent = "text";

但是当我设置文本内容时，ul的孩子消失了。它在innerHtml和innerText中具有相同的结果。

getElementByID("DropDown").innerText= "text";
getElementByID("DropDown").innerHtml= "text";

那么我必须将 Child(TextNode( 附加到 ul？我认为这太复杂了。我必须附加 TextNode，并且必须保存 TextNode 的引用。有什么简单的方法吗？

Answer 1

innerHTML只是一个字符串。如果覆盖它，它将丢失其之前的内容。但是，您可以改为附加到它，这样它就不会丢失其以前的内容。请参阅magic1
magic2显示了createElement+appendChild的方式。虽然它有更多的行，但如果要设置元素的各种属性(样式、事件处理程序和其他属性 - 不一定是针对列表项的这种特殊情况，但通常(，则更容易管理。

var i=0;
function magic1(){
  i++;
  document.getElementById("myUL").innerHTML+="<li>Testx"+i+"</li>";
}
function magic2(){
  i++;
  var li=document.createElement("li");
  li.innerHTML="Testy"+i;
  document.getElementById("myUL").appendChild(li);
}

<button onclick="magic1()">ClickMe1</button>
<button onclick="magic2()">ClickMe2</button>
<ul id="myUL"></ul>