JavaScript节点操作--创建节点、添加节点、删除节点、复制节点

喜欢ヅ旅行 2022-12-23 06:13 354阅读 0赞

节点操作

创建节点

  1. document.createElement('tagName')

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也成为动态创建元素节点。

添加节点

  1. node.appendChild(child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css中的after伪元素。

  1. <body>
  2. <ul>
  3. </ul>
  4. <script>
  5. //创建元素节点
  6. var li =document.createElement('li');
  7. //添加节点
  8. var ul = document.querySelector('ul');
  9. ul.appendChild(li);
  10. </script>
  11. </body>
  12. node.insertBefore(child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。

  1. var lili = document.createElement('li');
  2. ul.insertBefore(lili,ul.children[0]);

删除结点

  1. node.removeChild(child);

node.removeChild()方法从DOM中删除一个子节点,返回删除的结点。

  1. <body>
  2. <ul>
  3. <li>第一个</li>
  4. <li>第二个</li>
  5. <li>第三个</li>
  6. </ul>
  7. <script>
  8. var ul = document.querySelector('ul');
  9. ul.removeChild(ul.child[0]);
  10. </script>
  11. </body>

复制结点

  1. node.cloneNode();

node.cloneNode()方法返回调用该方法的结点的一个副本。也称为克隆节点或者拷贝节点。括号里面为空或者false为浅拷贝,只复制结点不复制内容。括号里面为true为深拷贝,复制节点,复制内容

  1. <body>
  2. <ul>
  3. <li>1</li>
  4. <li>2</li>
  5. <li>3</li>
  6. </ul>
  7. <script>
  8. var ul = document.querySelector('ul');
  9. var lili = ul.children[0].cloneNode(true);
  10. ul.appendChild(lili);
  11. </script>
  12. </body>

发表评论

表情:
评论列表 (有 0 条评论,354人围观)

还没有评论,来说两句吧...

相关阅读