<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
/*操作文档、html结构
*/
//1.内部插入方法
//1.append() 在被选元素的结尾插入内容
$("#t01").click(function(){
$("#box").append(",饭");
});
//2.appendTo() 把选择的 HTML元素插入到被选元素后门
$("#t02").click(function(){
$("u").appendTo("#box");
});
//3.prepend() 在被选元素的前面插入内容
$("#t03").click(function(){
$("#box").prepend("今天，");
});
//4.prependTo() 把选择的 HTML元素插入到被选元素前面
//2.外部插入方法
//1.after()
$("#t04").click(function(){
$("#box").after("好好学习，天天向上");
});
//2.before()
//3.insertAfter()
//4.insertBefore()
//3.包裹
//1.wrap() 把前面元素的放到后面的元素中包起来
// $("p").before("div"); //<div><p></p></div>
//4.替换
//1.replaceWith() 吧前面元素用后门元素替换
//2.replaceAll() 用前面元素吧后面元素替换
//5.删除
//1.empty() 吧前面元素里的html清空 ，通常和append()连用，添加一个新的之前先清空
$("#t05").click(function(){
$("#box").empty();
});
//6.复制
//1.clone() //里面写个true表示规定处理事件，如添加了动画 默认为false
$("#t06").click(function(){
$("u").clone().appendTo("#box");
});
});
</script>
</head>
<body>
<button id="t01">测试append</button>
<button id="t02">测试appendTo</button>
<button id="t03">测试prepend</button>
<hr />
<button id="t04">测试after</button>
<button id="t05">测试empty</button>
<button id="t06">测试clone</button>
<hr />
<u>,你呢？</u>
<div id="box" style="width: 200px;height: 200px;border: 2px solid black;">
<b>我晚饭吃了</b>
</div>
</body>
</html>
原文：https://www.cnblogs.com/wangdongwei/p/11341610.html