<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d1">
<div id="dd1" class="c">
<p id="p1">哈哈</p>
</div>
</div>
<div id="d2" class="c">
<p>哈哈1</p>
</div>
<input id="input1" type="text" value="嘎嘎" />
<input id="inner_insert" type="button" value="内部插入" />
<input id="outer_insert" type="button" value="外部插入" />
<input id="baoguo" type="button" value="包裹" />
<input id="tihuan" type="button" value="替换" />
<input id="shanchu" type="button" value="删除指定元素" />
<input id="detach" type="button" value="删除detach" />
<input id="copy" type="button" value="复制" />
<script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
var inner_insert = document.getElementById("inner_insert");
var outer_insert = document.getElementById("outer_insert");
var baoguo = document.getElementById("baoguo");
var tihuan = document.getElementById("tihuan");
var shanchu = document.getElementById("shanchu");
var detach = document.getElementById("detach");
var copy = document.getElementById("copy");
inner_insert.onclick = function(){
/* 内部插入 */
/* append：在指定元素后面添加自定义标签字符串 */
/* $("#d1").append("<span>我是新添加的span--append<span>"); */
/* prepend：在指定元素前面添加自定义标签字符串 */
/* $("#d1").prepend("<span>我是新添加的span--prepend<span>"); */
/* 与上面效果完全一样，只是写法不一样（把字句和被字句的区别） */
$("<span>我是新添加的span--append<span>").appendTo("#d1");
$("<span>我是新添加的span--prepend<span>").prependTo("#d1")
}
outer_insert.onclick = function(){
/* 外部插入 */
/* after：在指定元素后面添加自定义标签字符串 */
/* $("#d1").after("<span>我是新添加的span--after<span>"); */
/* before：在指定元素前面添加自定义标签字符串 */
/* $("#d1").before("<span>我是新添加的span--before<span>"); */
/* 与上面效果完全一样，只是写法不一样（把字句和被字句的区别） */
/* insertAfter:在指定元素外后面添加自定义标签字符串 */
$("<span>我是新添加的span--insertAfter<span>").insertAfter("#d1");
/* insertBefore:在指定元素外后面添加自定义标签字符串 */
$("<span>我是新添加的span--insertBefore<span>").insertBefore("#d1");
}
baoguo.onclick = function(){
/* 包裹wrap:指定元素被自定义标签字符串包裹（字符串必须为标签） */
/* 如果被包裹元素有多个，则分开包裹 */
/* 如果有内容，则内容在被包裹标签前；如果有多层标签，则包裹在内层 */
/* $(".c").wrap("<li><p></p></li>"); */
/* 如果被包裹元素有多个，则整体包裹 */
$(".c").wrapAll("<li><p></p></li>");
}
tihuan.onclick = function(){
/* 替换 */
/* replaceWith：使用自定义标签字符串替换指定元素 */
/* $("#d1").replaceWith("<p><span>我是替换来的</span></p>"); */
$(".c").replaceWith("<p><span>我是替换来的</span></p>");
}
shanchu.onclick = function(){
$("#d1").empty();
}
$("#dd1").click(function(){
alert("我是d1");
});
detach.onclick = function(){
/* 删除指定元素 */
/* remove：删除指定元素 */
/* $("#d1").remove(); */
/* empty:清楚指定元素的内容 */
var $dd1 = $("#dd1").detach();
$("#d1").append($dd1);
}
copy.onclick = function(){
/* 复制指定元素 */
/* clone:复制元素到另一个指定位置，如果不加clone(),即不复制则会进行移动操作*/
$("#d1").append($("#p1").clone());
}
</script>
</body>
</html>
