JS中节点增减CD操作

最新推荐文章于 2022-03-30 18:25:45 发布

Test_晓

最新推荐文章于 2022-03-30 18:25:45 发布

阅读量421

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45473786/article/details/104774014

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章目录

增加节点操作

代码一

<div id="box">
    <p class="child1">11</p>
    <button class="child2">点我</button>
</div>
<script>
    window.onload = function (){
        //获取元素标签
        var box = document.getElementById('box');
        // 创建节点     
        var img = document.createElement('img');   //创建img标签
        img.src = './program1/images/1.jpg';    //图片路径
        img.style = 'width:100px';			//图片样式
        // 创建好的标签追加到页面中
        box.appendChild(img);
 </script>

代码一图示

在这里插入图片描述

代码二

<div id="box">
    <p class="child1">11</p>
    <button class="child2">点我</button>
</div>
<script>
    window.onload = function (){
        var box = document.getElementById('box');
        // 创建节点     
        var img = document.createElement('img');   //创建img标签
        img.src = './program1/images/1.jpg';
        img.style = 'width:100px';

        //插入某一指定标签之前   插入在button标签之前
        var btn = document.getElementsByClassName('child2')[0];
        box.insertBefore(img,btn);
    }
</script>

代码二图示

在这里插入图片描述

删除节点操作

代码三

<div id="box">
    <p class="child1">11</p>
    <button class="child2">点我</button>
</div>
<script>
    window.onload = function (){
        //删除节点  有两种方法
        var btn = document.getElementsByClassName('child2')[0];
        btn.remove();               // 自身删除
      //  box.removeChild(btn);      //从父盒子中删除
</script>