javascript代码中如何添加节点

ul id="myList">
    li>
    Item 1/li>
    li>
    Item 2/li>
    /ul>
    

此时我们可以在JavaScript中用下面的代码来实现添加操作：

var ul = document.getElementById("myList");
      //先找到要添加的目标节点var newLi = document.createElement("li");
       //创建一个新的li>
    元素var text = document.createTextNode("list item");
      //创建一个文本节点，作为新元素的内容newLi.appendChild(text);
      //将文本节点添加进新元素的子节点列表中ul.appendChild(newLi);
      //将新元素添加到目标节点的子节点列表的末尾

第一行代码用getElementById()方法找到了id为"myList"的无序列表元素，然后用createElement()方法新建了一个名为newLi的li元素。接下来，我们用createTextNode()方法创建了一个文本节点，用其内容填充新的li元素，最后将新元素添加到ul元素的末尾。此时，可以在HTML代码中该位置下方看到一个新的内容为"list item"的列表项。

另一种添加元素的方法是insertBefore()方法，用于在指定节点之前插入新的节点。下面的代码演示了如何用insertBefore()方法在id为"myList"的无序列表的开头处添加新的列表项：

var ul = document.getElementById("myList");
      //先找到目标节点var newLi = document.createElement("li");
       //创建新元素var text = document.createTextNode("list item");
      //创建文本节点newLi.appendChild(text);
    ul.insertBefore(newLi, ul.firstChild);
      //将新元素插入到目标节点前面

同样，我们先要用getElementById()方法获取到目标节点，然后新建一个li元素并创建文本节点，将文本内容添加进li元素中。最后，通过insertBefore()方法将li元素插入到目标节点之前。

除了上面介绍的appendChild()和insertBefore()方法外，还有其他的添加节点的方法，如innerHTML属性、insertAdjacentHTML()方法、DocumentFragment等。但它们都有自己的局限性和适用范围，需要根据实际场景选择适合的方法。在使用时还需要注意避免频繁操作DOM，尽可能将修改集中在一个操作中，以减少页面的回流和重绘次数，提高代码的性能。

总的来说，JavaScript中添加DOM节点的方法比较简单，可以通过创建新的元素、插入到指定位置、或者动态修改元素属性等方式实现。对于Web开发者来说，掌握这些方法不仅可以大大提高代码的复用性和灵活性，还可以让页面更加动态化和生动化。