节点操作之创建和添加节点

最新推荐文章于 2024-08-26 17:50:05 发布

只通宵不熬夜

最新推荐文章于 2024-08-26 17:50:05 发布

阅读量2.5k

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_67110633/article/details/128851968

版权

1.创建节点

document.createElement('tagName')

document.createElement() 方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据需要动态生成的，所有也称之为动态创建元素节点。

2.添加节点

1.node.appendchild（child）

node.appendchild（）方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素。

2.node.insertBefore（child，指定元素）

node.insertBefore（）方法将一个节点添加到父节点的指定节点前面，类似于css里面的before伪元素。

代码入下：

<body>
  <ul>
    <li>5641</li>
  </ul>
    <script>
        //给ul添加li，如果原来的ul有li，则在后面追加元素
        //1.创建元素节点
      let li= document.createElement('li');
      //2.添加节点 node是父级  child是子级
      let ul=document.querySelector('ul');
      ul.appendChild(li);
      //3.添加节点 node.insertBefore（child，指定元素）;
      let lili=document.createElement('li');
      ul.insertBefore(lili,ul.children[0]);
      //4.在页面添加一个新元素：1.创建元素 2.添加元素
    </script>
</body>