30 jQuery——操作文档结构
操作文档结构
具体使用请参考API
内部插入：
1. append和appendTo
2. prepend和prependTo
1追加到后面，2追加到前面
1和2中：以和字分隔
前者把字句：a把b追加进来
后者被字句：a被b追加进去
1和2追加的内容都可以是字符串和元素对象
外部插入：
after()：外部插入，插到指定元素后面
before():外部插入：插到指定元素前面
insertAfter()与insertBefor() ：它们两个与prependTo和appendTo()类似，只不过是外部插到后面和前面
包裹：
wrap()具体用法查询api
a.wrap(content)，将a对象外包裹指定的content元素
替换：
replaceWith和replaceAll()把字句与被字句
a.replaceWith(content) 使用content将a对象替换，包括标签内容
删除：
empty() ：删除标签下的所有子节点
复制：
clone()
a.clone() 复制一份a
通常和append()连用:a.clone().appendTo(b)
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作文档结构</title>
<!--
内部插入：
1. append和appendTo
2. prepend和prependTo
1追加到后面，2追加到前面
1和2中：以和字分隔
前者把字句：a把b追加进来
后者被字句：a被b追加进去
1和2追加的内容都可以是字符串和元素对象
外部插入：
after()：外部插入，插到指定元素后面
before():外部插入：插到指定元素前面
insertAfter()与insertBefor() ：它们两个与prependTo和appendTo()类似，只不过是外部插到后面和前面
包裹：
wrap()具体用法查询api
a.wrap(content)，将a对象外包裹指定的content元素
替换：
replaceWith和replaceAll()把字句与被字句
a.replaceWith(content) 使用content将a对象替换，包括标签内容
删除：
empty() ：删除标签下的所有子节点
复制：
clone()
a.clone() 复制一份a
通常和append()连用:a.clone().appendTo(b)
-->
<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//append()内部追加（追加到元素内部）
function testAppend(){
//获取元素
var div = $("#showdiv");
//使用内部插入，与HTML不同，append追加，而html是覆盖
//常见应用场景：下拉框填充数据
div.append("<i>，亲爱的</i>")
//也可以直接追加一个对象
}
//appendTo()将一个元素追加到另一个元素中去
function testAppendTo(){
var div = $("#showdiv");
var u1 = $("#u1");
//将ul添加到div中
u1.appendTo(div);
}
//prepend()将一个元素添加到另一个元素之前
function testPrepend(){
var div = $("#showdiv");
var b1 = $("#b1");
//在div前添加b1
div.prepend(b1);
}
function testPrependTo(){
var div = $("#showdiv");
var b1 = $("#b1");
//在div前添加b1
b1.prependTo(div);
}
//after()外部插入：插到指定元素后面（外部）
function testAfter(){
//获取元素对象
var div = $("#showdiv");
//使用after外部插入
div.after("<b>我为啥被插到外面了</b>")
}
function testBefore(){
var div = $("#showdiv");
div.before("<b>我被插到前面了</b>")
}
//wrap() 包裹
function testWrap(){
var p1 = $("#p1");
p1.wrap("<div class='myClass'></div>");
}
//replaceWith()和replaceAll() 替换:不但换标签，还换标签内容
function testReplaceWith(){
var p2 = $("#p2");
p2.replaceWith("<b>我被替换啦啊啊啊啊啊</b>");
}
// empty() 删除
function testEmpty(){
var div = $("#showdiv");
div.empty()
}
//clone()复制,通常和append()等连用
function testClone(){
var b2 = $("#b2");
var p3 = $("#p3");
b2.clone().appendTo(p3);
}
</script>
<style type="text/css">
#showdiv{
width:200px;
height: 200px;
border:1px solid orange;
}
.myClass{
border: 1px solid red;
}
</style>
</head>
<body>
<h3>操作文档结构</h3>
<p>具体用法请查api</p>
<input type="button" name="" id="" value="测试append()" onclick="testAppend()"/>
<input type="button" name="" id="" value="测试appendTo()" onclick="testAppendTo()"/>
<input type="button" name="" id="" value="测试prepend()" onclick="testPrepend()"/>
<input type="button" name="" id="" value="测试prependTo()" onclick="testPrependTo()"/>
<input type="button" name="" id="" value="测试after()" onclick="testAfter()"/>
<input type="button" name="" id="" value="测试befer()" onclick="testBefore()"/>
<input type="button" name="" id="" value="测试wrap()" onclick="testWrap()"/>
<input type="button" name="" id="" value="测试replaceWith()" onclick="testReplaceWith()"/>
<input type="button" name="" id="" value="测试empty()" onclick="testEmpty()"/>
<input type="button" name="" id="" value="测试clone()" onclick="testClone()"/>
<b id="b1">你说啥？-</b>
<div id="showdiv">
<b>今天中午吃啥</b>
</div>
<u id="u1">-大白菜</u>
<p id="p1">我即将被包裹起来：使用wrap()</p>
<p id="p2">我即将被替换</p>
<hr>
<b id="b2">我即将被复制</b>
<p id="p3">我即将接收复制:</p>
</body>
</html>
