jQuery对象的插入、删除、复制、替换（附有代码以及运行截图）

最新推荐文章于 2025-03-30 14:29:30 发布

GodGump

最新推荐文章于 2025-03-30 14:29:30 发布

阅读量713

点赞数

分类专栏： html复习

本文链接：https://blog.csdn.net/GodGump/article/details/114278465

版权

html复习专栏收录该内容

23 篇文章

订阅专栏

jQuery对象插入的方式，分为在内部插入与在外部插入。简单来说，是父子节点还是兄弟节点
插入操作
append():添加到指定标签的最后面
prepend():插入到指定标签的前面
before():在…之前插入
after():在…之后插入
前两者是内部插入，后两者是外部插入
删除操作
remove():该节点与该节点所包含的所有后代节点将同时被删除
detach():所有绑定的事件、附加的数据等都会保留下来,其他效果与remove()相同
empty():将指定节点的所有子节点删除，本身保留
复制操作
clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
括号里带true参数则复制出来的节点具备原节点所绑定的事件处理程序，false则反之
替换操作
replaceAll()
replaceWith()
这两种方法在使用时效果完全相同，主要区别在于主要是目标和源的位置区别，replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点
举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="testDiv">
    <h3>工具人</h3>
    <h3>待删除的对象</h3>
</div>
</body>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js">
</script>
<script>
   var $sonH1 = $("<h3>这是插到后面的</h3>");
   var $div   = $('div').get(0);
   var delH =  $('h3').get(1) ;
   // alert( $delH.get(1).innerHTML );
   // alert( $div.id );
   $div.append($sonH1.get(0));
   var $sonH2 = $("<h3>这是插到前面的</h3>");
   $div.prepend($sonH2.get(0));
   var $befDiv = $("<h3>这是插到前面的</h3>");
   var $aftDiv = $("<h3>这是插到后面的</h3>");
   $div.before($befDiv.get(0));
   $div.after($aftDiv.get(0));
   delH.remove();
</script>
</html>

运行结果：
在这里插入图片描述