jQuery操作节点元素方法总结

最新推荐文章于 2022-07-12 19:28:52 发布

一个快乐仔

最新推荐文章于 2022-07-12 19:28:52 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏：基础知识总结文章标签： jquery append

本文链接：https://blog.youkuaiyun.com/jianghuchuanpei/article/details/78458008

基础知识总结专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了jQuery中节点操作的方法，包括插入、删除、复制及替换等常见操作，并提供了具体的代码实例，有助于读者快速掌握这些技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近闲来无事，决定开始写博客，一方面将一些心得、总结记录一下，另一方面也希望能对他人有所帮助(如果有写错的地方请不吝赐教)

插入节点
插入节点是操作节点元素中最常用的操作，其中的方法包括append()，appendTo()，prepend()，prependTo()，after()，insertAfter()，before()，insertBefore()，其方法如此之多，即使是经验丰富的程序员，如果一段时间不用可能也会遗忘，在此总结：
1.append：向元素中追加元素 $("p").append("插入节点元素");
2.append：将元素追加到元素中 $("追加节点元素").appendTo("p");
3.prepend：向元素中前置元素 $("p").prepend("前置节点元素");
4.prependTo：将元素前置到元素中 $("前置到节点元素").prependTo("p");
5.after：向元素元素后插入元素 $("p").after("节点元素后插入节点元素");
6.insertAfter：将元素插入到元素后边 $("插入到节点元素后").insertAfter("p");
7.before：在元素之前添加元素 $("p").before("节点元素前插入节点元素");
8.insertBefore：将元素插入到元素前面 $("插入到节点元素前").insertBefore("p");

删除节点
相比较而言删除节点就比较少了，主要就remove()与empty()：
1.remove：删除ul节点中第2个元素节点 $("ul li:eq(1)").remove();
2.empty：清空ul节点下第2个li元素的内容(准确的说，这也不算删除) $("ul li:eq(1)").empty();

复制节点
复制节点的方法大家都很清楚，就是clone()：
1.clone：克隆并追加一个 p 元素 $("body").append($("p").clone());

替换节点
替换节点主要有两个方法，作用相同，replaceWith() 方法用指定的 HTML 内容或元素替换被选元素，replaceAll() 方法用指定的 HTML 内容或元素替换被选元素，差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。：
1.replaceWith：用粗体文本替换每个段落 $("p").replaceWith("Hello world!");
2.replaceAll：用粗体文本替换每个段落 $("p").replaceAll("Hello world!");

好了，大概就这么多了，第一次写，写的不好请大家谅解，后面附上demo，帮助理解

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button#button-append").click(function(){
        $("p").append("<b>插入节点元素</b>");            //向<p>元素中追加<b>元素
    });
    $("button#button-appendTo").click(function(){
        $("<b>追加节点元素</b>").appendTo("p");          //将<b>元素追加到<p>元素中
    });
    $("button#button-prepend").click(function(){
        $("p").prepend("<b>前置节点元素</b>");           //向<p>元素中前置<b>元素
    });
    $("button#button-prependTo").click(function(){
        $("<b>前置到节点元素</b>").prependTo("p");        //将<b>元素前置到<p>元素中
    });
    $("button#button-after").click(function(){
        $("p").after("<b>节点元素后插入节点元素</b>");        //向<p>元素元素后插入<b>元素
    });
    $("button#button-insertAfter").click(function(){
        $("<b>插入到节点元素后</b>").insertAfter("p"); //将<b>元素插入到<p>元素后边
    });
    $("button#button-before").click(function(){
        $("p").before("<b>节点元素前插入节点元素</b>");       //在<p>元素之前添加<b>元素
    });
    $("button#button-insertBefore").click(function(){
        $("<b>插入到节点元素前</b>").insertBefore("p");    //将<b>元素插入到<p>元素前面
    });

    //几种删除节点的方法 
    //var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点 
    //$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去 
    //$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除 
    //$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容 

    //复制节点 
   /* $("ul li").click(function(){ 
     $(this).clone(true).appendTo("ul");//复制当前点击的节点，并将它追加到《ul》元素中，当添加参数时复制它的事件
    }); 
    */ 
    //替换节点 
   //$("p").replaceWith("<strong>你最不喜欢的水果是？</Strong>"); 
   //$("[name='rp']").replaceWith("<tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr><tr><td>gg</td><td>gg</td><td>gg</td><td>gg</td></tr>");
});
</script>
<title>超实用的jQuery代码段</title>
</head>
<body>
<h2>超实用的jQuery代码段 - jQuery插入节点元素的方法</h2>
<button id="button-append">插入节点元素 - append()函数</button><br>
<button id="button-appendTo">插入节点元素 - appendTo()函数</button><br>
<button id="button-prepend">插入节点元素 - prepend()函数</button><br>
<button id="button-prependTo">插入节点元素 - prependTo()函数</button><br>
<button id="button-after">插入节点元素 - after()函数</button><br>
<button id="button-insertAfter">插入节点元素 - insertAfter()函数</button><br>
<button id="button-before">插入节点元素 - before方法</button><br>
<button id="button-insertBefore">插入节点元素 - insertBefore()函数</button><br>
<p>您好！您最喜欢的IT公司是：</p>
<ul>
    <li title="Google">Google</li>
    <li title="Apple">Apple</li>
    <li title="Microsoft">Microsoft</li>
</ul>
</body>
</html>