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

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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 = $("

这是插到后面的

"
); 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 = $("

这是插到前面的

"
); $div.prepend($sonH2.get(0)); var $befDiv = $("

这是插到前面的

"
); var $aftDiv = $("

这是插到后面的

"
); $div.before($befDiv.get(0)); $div.after($aftDiv.get(0)); delH.remove();
script> html>

运行结果:
jQuery对象的插入、删除、复制、替换(附有代码以及运行截图)_第1张图片

你可能感兴趣的:(html复习)