Question

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

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

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

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

然后我必须将孩子（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>

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

1 个答案: