js和jq动态添加、删除节点的方法汇总

最新推荐文章于 2024-04-17 08:48:05 发布

youyou_builder

最新推荐文章于 2024-04-17 08:48:05 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/youyouyouyou44/article/details/82457427

版权

使用的时候总是容易查一下、试一下，今天想要自己总结一下，要是不确定直接来看看。
刚说完要自己写，结果就看到了更好的总结，所以我就加上自己的理解做了部分修改，不要嫌弃我呀~

一：原生js操作节点

1、appendChild();添加
概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加
使用方式：父级节点.appendChild( 要添加的节点 )
兼容性：所有浏览器都支持此方法
JS代码：

<body>
    <div id="box">
        <p></p>
        <i></i>
    </div>
</body>
<script>
    var oBox = document.getElementById("box");
    var oSpan = document.createElement("span");//添加元素节点
//    var oText = document.createTextNode("文字节点");//添加文字节点
    oBox.appendChild(oSpan);
</script>

效果图：

image.png

2、insertBefore()添加
概念：把要插入的节点添加到指定父级里面的指定节点之前，改变父级即可添加兄弟节点。
使用方式：父级节点.insertBefore( 要插入的节点，指定节点 )
兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在
JS代码：

image.png

3、removechild() 删除
概念：删除指定的子节点
指定元素的父级.removechild(指定子节点)

<body>
    <div id="box">
        <p id="p"></p>
        <i></i>
    </div>
</body>
<script>
    var oBox = document.getElementById("box");
    var oP = document.getElementById("p");//可以不用获取div，直接获取oP的父级（oP.parentNode）
    oBox.removeChild(oP);
</script>

二、jQuery中操作节点

1、添加
第一组：before() & insertBefore()
第二组：after() & insertAfter()
第三组：prepend() & prependTo()
第四组：append() & appendTo()
接下来就是代码加说明：

<body>
    <div id="box">
        <p id="p"></p>
        <i id="i"></i>
    </div>
</body>
<script>
    var oSpan = $("<span></span>");

    //before()在指定节点的前面添加要添加的节点 - 指定节点.before( 要添加的节点 )
    $("#p").before(oSpan);
    //insertBefore()把要插入节点插入到指定节点的前面 - 要插入的节点.insertBefore( 指定节点 )
    oSpan.insertBefore($("#p"));

    //after()把要添加的节点添加到指定节点的后面 - 指定节点.after( 要添加的节点 )
    $("#p").after(oSpan);
    //insertAfter()把要插入的节点插入到指定节点的后面 - 要插入的节点.insertAfter( 指定节点 )
    oSpan.insertAfter($("#p"));

    //prepend()在指定父级里面的最前面添加指定节点 - 父级节点.prepend( 要添加的节点 )
    $("#box").prepend(oSpan);
    //prependTo()把指定节点添加到指定父级里面的最前面 - 要添加的节点.prependTo( 父级节点 )
    oSpan.prependTo($("#box"));

    //append()等同于原生JS的appendChild方法,在指定父级里面的最后面添加指定节点 - 父级节点.append( 要添加的节点 )
    $("#box").append(oSpan);
    //appendTo()把指定节点添加到指定父级里面的最后面 - 要添加的节点.appendTo( 父级节点 )
    oSpan.appendTo($("#box"));
</script>

每一组的结果都一样，没有什么区别，但是主体不同，接下来想要直接链式添加功能，作用的对象就不一样了，这个注意一下就行了。就基本所有的浏览器都兼容。
借鉴：http://www.cnblogs.com/rentianyuan/p/4767113.html

2、删除
remove() - 方法删除被选元素及其子元素。obj.remove();obj也会被删除
empty() - 方法删除被选元素的子元素。obj.empty();obj不会被删除

youyou_builder

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js和jq动态添加、删除节点的方法汇总

使用的时候总是容易查一下、试一下，今天想要自己总结一下，要是不确定直接来看看。刚说完要自己写，结果就看到了更好的总结，所以我就加上自己的理解做了部分修改，不要嫌弃我呀~一：原生js操作节点1、appendChild();添加概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加使用方式：父级节点.appendChild( 要添加的节点 )...
复制链接

扫一扫