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

最新推荐文章于 2024-05-28 00:30:00 发布

我是Dreamer啊

最新推荐文章于 2024-05-28 00:30:00 发布

阅读量1.3w

点赞数 7

分类专栏：前端开发文章标签： javascript dom

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/109961651

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

节点操作

创建节点

document.createElement('tagName')

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

添加节点

node.appendChild(child)

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

<body>
    <ul>
        
    </ul>
    <script>
    	//创建元素节点
        var li =document.createElement('li');
        //添加节点
        var ul = document.querySelector('ul');
        ul.appendChild(li);
    </script>
</body>

node.insertBefore(child,指定元素)

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

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

删除结点

node.removeChild(child);

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

<body>
    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
    <script>
    	var ul = document.querySelector('ul');
        ul.removeChild(ul.child[0]);
    </script>
</body>

复制结点

node.cloneNode();

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

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul> 
    <script>
    	var ul = document.querySelector('ul');
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>
</body>

我是Dreamer啊

关注

7
点赞
踩
21

收藏

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

节点操作创建节点document.createElement('tagName')document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也成为动态创建元素节点。添加节点node.appendChild(child)node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css中的after伪元素。<body> <ul>
复制链接

扫一扫

专栏目录