节点操作--创建（添加删除复制）节点

最新推荐文章于 2022-07-12 21:07:45 发布

矢目

最新推荐文章于 2022-07-12 21:07:45 发布

阅读量250

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/qq_48104836/article/details/118143297

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

创建节点： docunent.createElement("tagName") ;
添加节点：（1） node.appendChild(child); 将一个节点添加到子节点的后面，追加
         （2） node.insertBefore(child,指定元素)将一个节点添加到子节点的前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul></ul>

</body>
<script type="text/javascript">
    //创建元素节点
   var li=document.createElement("li");
   var ul=document.querySelector("ul");
   ul.appendChild(li);//添加元素节点   node.appendChild(child);   node父  child 子

    //在指定元素前添加元素
    //添加节点   node.insertBefore(child,指定元素)
    var lili=document.createElement("li");
    ul.insertBefore(lili,ul.children[0])
</script>
</html>

删除节点：node.removeChlid(chlid) 方法从DOM中删除一个子节点，返回删除的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>删除</button>
<ul>
    <li>王一</li>
    <li>王二</li>
</ul>
<script>
    var but=document.querySelector("button");
    var ul=document.querySelector("ul");
   but.onclick =function () {
      if (ul.children.length==0){
          this.disabled=true;
      }else {
          ul.removeChild(ul.children[0]);//node.removeChild(child);node(父亲)
      }
       
   }
</script>

</body>
</html>

复制节点（克隆）：node.choneNode ()方法返回调用该方法节点的一个副本

<body>
<ul>
    <li>111</li>
    <li>222</li>
</ul>
<script>
    //node.cloneNode();复制   如果括号为空或者false浅拷贝只复制标签不拷贝内容
    //node.cloneNode(true);复制   如果括号为空或者true浅拷贝只复制标签不拷贝内容
    var ul=document.querySelector("ul");
   // var lili=ul.children[0].cloneNode();
    var lili=ul.children[0].cloneNode(true);
  ul.appendChild(lili)
</script>
</body>
</html>

矢目

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节点操作--创建（添加删除复制）节点

创建节点： docunent.createElement("tagName") ;添加节点：（1） node.appendChild(child); 将一个节点添加到子节点的后面，追加（2） node.insertBefore(child,指定元素)将一个节点添加到子节点的前面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫