.unwrap()
将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
<div class="a">
<p>test</p>
</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('p').unwrap();
});
</script>
.wrap()
在每个匹配的元素外层包上一个html元素。
<style type="text/css">
.a{background:#900; 100px; height:100px; margin-top:10px;}
</style>
</head>
<body>
<p>test</p>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('p').wrap('<div class="a"></div>');
});
</script>
.wrapAll()
在所有匹配元素外面包一层HTML结构。
<style type="text/css">
.a{background:#900; 100px; height:100px; margin-top:10px;}
</style>
</head>
<body>
<p>test</p>
<p>test2</p>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('p').wrapAll('<div class="a"></div>');
});
</script>
.wrapInner()
在匹配元素里的内容外包一层结构。
<style type="text/css">
.a{background:#900; 100px; height:100px; margin-top:10px;}
</style>
</head>
<body>
<p>test</p>
<p>test2</p>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('p').wrapInner('<div class="a"></div>');
});
</script>
.after()
在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点。
<div class="a">1</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.a').after('<p>test2</p>');
});
</script>
.before()
根据参数设定,在匹配元素的前面插入内容(译者注:外部插入)
<div class="a">1</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.a').before('<p>test2</p>');
});
</script>
.insertAfter()
在目标元素后面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。
<div class="a">1</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('<p>test2</p>').insertAfter('.a');
});
</script>
.insertBefore()
在目标元素前面插入集合中每个匹配的元素(注:插入的元素作为目标元素的兄弟元素)。
<div class="a">1</div>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('<p>test2</p>').insertBefore('.a');
});
</script>