jquery 包裹元素、元素外插入

.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>
原文地址:https://www.cnblogs.com/hustshu/p/15071731.html