温故知新——DOM节点增删查改替换复制

DOM节点增删查改替换复制

这篇文章中总结的节点操作比较狭义，特指对 element 节点的操作，并没有包含其他内容，至于对文本内容和属性的操作就放在下一篇吧～

节点的“查”操作已经在上一篇文章中总结过了，在本文中主要包括创建节点、修改节点、插入节点、删除节点、替换节点、查看节点和复制节点

今天的通过下面这一段范例代码展开：

<ul id="users">
  <li class="user">小A君</li>
  <li class="user">小C君</li>
</ul>

我们可以设想这样一个应用场景，根据上面的结构，创建两个新的“小B君”和“小D君”，按照 ABCD 的顺序插入到上面的列表中

那么我们就开始吧～

创建节点

createElement

创建 element 节点主要依赖 createElement 方法，这个方法接受一个参数，即要创建的标签名：

let tempLi = document.createElement('li');
console.log(tempLi); // <li></li>

这个标签名并不区分大小写，但是按照标准最好还是采用小写～

当 element 被创建的时候，它所属的 document 就被设置好了，

修改节点

当一个空的 element 创建出来后，就要根据我们的需求为其添加内容

如果我们要添加的是文本内容，可以采用下面的几个方法；

• innerText
• textContent

而关于添加（插入）节点的内容就放在下一节 插入节点 中

innerText

innerText 属性是一个可读可写的属性，它可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过innerText读取值时，它会按照由浅入深地顺序，将子文档树中的所有文本拼接起来。在通过inne