<style type="text/css">
#div1{
border: red 2px solid;
width: 200px;
height: 50px;
}
#div2{
border: blue 2px dashed;
width: 150px;
height: 50px;
}
#div3{
border: red 2px solid;
width: 200px;
height: 50px;
}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
function testAppend(){
//在#div2的内部 后面追加元素
$("#div2").append("<i>world</i>");
}
function testAppendTo(){
$("<i>world</i>").appendTo("#div2");
}
function testPrepend(){
//在#div2的内部 前面追加元素
$("#div2").prepend("<i>world</i>");
}
function testPrependTo(){
$("<i>world</i>").prependTo("#div2");
}
function testAfter(){
//在#div2的外部 后面追加元素
$("#div2").after("<div><i>world</i><div>");
}
function testInsertAfter(){
$("<div><i>world</i><div>").insertAfter("#div2");
}
function testBefore(){
//在#div2的外部 前面追加元素
$("#div2").before("<div><i>world</i><div>");
}
function testInsertBefore(){
$("<div><i>world</i><div>").insertBefore("#div2");
}
function testWrap(){
$("p").wrap("<div class='wrap'></div>")
}
function testWrapAll(){
$(".aaa").wrapAll("<div class='wrap'></div>")
}
function testReplaceWith(){
$("p").replaceWith("<b>Paragraph. </b>");
}
function testReplaceAll(){
$("<b>Paragraph. </b>").replaceAll("p");
}
function testUnWrap(){
$(".aaa:first").unwrap()
}
function testEmpty(){
$("#clear").empty();
}
function testRemove(){
$("#clear").remove();
}
</script>
</head>
<body>
<button onclick="testAppend()">testAppend</button>
<button onclick="testAppendTo()">testAppendTo</button>
<button onclick="testPrepend()">testPrepend</button>
<button onclick="testPrependTo()">testPrependTo</button>
<button onclick="testAfter()">testAfter</button>
<button onclick="testInsertAfter()">testInsertAfter</button>
<button onclick="testBefore()">testBefore</button>
<button onclick="testInsertBefore()">testInsertBefore</button>
<button onclick="testWrap()">testWrap</button>
<button onclick="testWrapAll()">testWrapAll</button>
<button onclick="testReplaceWith()">testReplaceWith</button>
<button onclick="testReplaceAll()">testReplaceAll</button>
<button onclick="testUnWrap()">testUnWrap</button>
<button onclick="testEmpty()">testEmpty</button>
<button onclick="testRemove()">testRemove</button>
<hr>
<div id="div1"></div>
<div id="div2">
<b>hello</b>
</div>
<div id="div3"></div>
<div>
<p class="aaa">Paragraph 1</p>
</div>
<p class="aaa">Paragraph 2</p>
<p class="aaa">Paragraph 3</p>
<div id="clear">
<b>hello</b>
</div>
