<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#content{
width: 300px;
height: 300px;
padding:10px;
background-color: pink;
}
.base{
background-color: yellowgreen;
}
.wrap{
background-color: gray;
}
.wrap-inner{
background-color: purple;
}
</style>
<script src="design/static/js/jquery_1.10.2.min.js"></script>
</head>
<body>
<div id="content">
<p class="base">我是一條測試內容</p>
</div>
<p class="test-wrap">我是用wrap追加進來的一條內容</p>
<p class="test-wrap">我是用wrap追加進來的一條內容2</p>
<p class="test-wrapAll">我是用wrapAll追加進來的一條內容</p>
<p class="test-wrapAll">我是用wrapAll追加進來的一條內容</p>
<p class="test-wrap-inner">我是用來測試wrapInner的</p>
</body>
</html>
<script>
$(function(){
//A代表位置，B代表要追加的內容
//1.A.append(B) 在A的后面追加B，注意B在A的內部，即做為其孩子節點
$('#content').append('<p>我是用append追加進來的一條內容</p>');
//2.A.after(B) 即在A的后面追加A，注意A做為B的兄弟
$('#content').after('<p>我是用after追加進來的一條內容</p>');
//3.B.appendTo(A) 即把A追加到B的后面，注意A在B的內部
$('<p>我是用appendTo追加進來的一條內容</p>').appendTo($('.base'));
//4.A.prepend(B) 即在A的內部的最頂部追加B，注意B在A的內部
$('#content').prepend('<p>我是用prepend追加進來的一條內容</p>');
//5.B.prependTo(A) 即把B追加到A的內部的頂部，注意B在A的內部
$('<p>我是用prependTo追加進來的一條內容</p>').prependTo($('.base'));
//6.A.before(B) 即在A的前面追加B，注意B在A的外部
$('#content').before('<p>我是用before追加進來的一條內容</p>');
//7.B.wrap(A) 即在B的外面再包一層A
$('.test-wrap').wrap('<div class="wrap"></div>');
//$('.test-wrap').wrap($('#content'));
//8.B.wrap(A) 即在B的外面再包一層A,與wrap不同的是wrapAll包住了所有的B，而wrap則是在每個B外面都包一個A
$('.test-wrapAll').wrapAll('<div class="wrap"></div>');
//9.B.wrapInner(A) 即在B的里面加一層A
$('.test-wrap-inner').wrapInner('<div class="wrap-inner"></div>')
});
</script>
