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>
运行结果: