Link to the original text of this article: https://blog.csdn.net/xzk9381/article/details/113859722
1. Use the wrap() method to add a parent element to each matched element
Use the $(DOM).wrap(Element) method to add a parent element to the specified element. This operation is also called element wrapping.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('.mydiv').click(function(){
alert($(this).html());
})
$.data($('.mydiv')[0],{
'type':'div'});
$('body>input').click(function (){
$('.mydiv').wrap('<div>父级元素<span>兄弟元素</span></div>');
console.log($.data($('.mydiv')[0]));
})
})
</script>
</head>
<body>
<input type="button" value="Wrap">
<div class="mydiv">测试1</div>
<div class="mydiv">测试2</div>
</body>
</html>
As you can see from the above code, the wrap method can be used to add a parent element to the specified element. If the parent element also contains a child element, then the child element and the specified element will be siblings to each other. And compared with the native method, the wrap method can retain element events, data, etc.
One more thing to note, the wrap() method is to add a separate parent element for each matched element.
2. Use wrapAll() to add a parent element to the set of matched elements
The wrapAll() method will uniformly add a common parent element to the set of matched elements:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('body>input').click(function (){
$('span').wrapAll('<h3></h3>');
})
})
</script>
</head>
<body>
<input type="button" value="WrapAll">
<div id="div1">
<div id="div2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<span>5</span>
<span>6</span>
</body>
</html>
Running the above code can find that the wrapAll() method treats all the span tags as a set and adds an h3 tag to it. And all span tags will be located inside div2, that is to say, after running the code, all span tags become sibling elements. This is because the wrapAll() method takes the position of the first matching span tag found as the specified position, puts all the span tags in this position, and then adds the specified parent element. Such an operation will change the structure of HTML, so use it with caution.
The wrapAll() method is also different from wrap(). For example, the following code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('body>input').click(function (){
$('span').wrapAll('<h3><div></div></h3>');
})
})
</script>
</head>
<body>
<input type="button" value="WrapAll">
<div id="div1">
<div id="div2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<span>5</span>
<span>6</span>
</body>
</html>
In the above code, there is also a child element div in the h3 tag, so that after the code runs, the div tag will be the parent element of all span tags.
One thing to note is that if a function is passed to the wrapAll() method, the effect will be the same as the wrap() method, that is, add a parent element for each matched element, and it will not change The location of the original element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('body>input').click(function (){
$('span').wrapAll(function(){
return '<h3></h3>';
});
})
})
</script>
</head>
<body>
<input type="button" value="WrapAll">
<div id="div1">
<div id="div2">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<span>5</span>
<span>6</span>
</body>
</html>
Third, use the wrapInner() method to add parent elements to the child elements of the specified element
wrapInner() can add a parent element to the child element of the specified element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('body>input').click(function (){
$('#div1').wrapInner('<h3></h3>');
})
})
</script>
</head>
<body>
<input type="button" value="WrapInner">
<div id="div1">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4
<span>5</span>
</span>
</div>
</body>
</html>
After running the code, the wrapInner() method will only add parent elements to the first-level child elements below div1.
Fourth, use the unwrap() method to delete the parent element
Use the $(DOM).unwrap(Element) method to remove the parent element for the specified element:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$('document').ready(function (){
$('#myspan').click(function(){
alert($(this).html());
})
$.data(myspan,{
'type':'span'});
$('body>input').click(function (){
$('#myspan').unwrap();
console.log($.data(myspan));
})
})
</script>
</head>
<body>
<input type="button" value="Unwrap">
<div id="div1">
<div id="div2">
<span>1</span>
<span>2</span>
<span id="myspan">3</span>
<span>4</span>
</div>
</div>
</body>
</html>
Running the above code can find that deleting the parent element can also retain the existing events and data of the span tag. Click the button multiple times to delete the multi-level parent element. You can also delete multi-level parent elements through chained calls. But it can only be deleted under the body tag, which means that when the parent element of an element is body, it cannot be deleted.
Link to the original text of this article: https://blog.csdn.net/xzk9381/article/details/113859722