Of Stack

Method to insert a new element outside of each matched element

  • 2020-03-30 00:59:33
  • OfStack
A method,

Wrap: to wrap all matched elements in the structure of other elements

WrapAll: wraps all matched elements in a single element

WrapInner: wraps a subclass of the matching element in an HTML structure

Second, the instance

(1) the wrap 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("div a").wrap("<div id='id'></div>"); 
}); 
</script> 
</head> 
<body> 
<div> 
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 
</div> 
</body> 
</html>

Firebug display results: 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 
<script type="text/javascript"> 
</head> 
<body> 
<div> 
<div id="id"> 
<a>liuxingyu</a> 
</div> 
<div id="id"> 
<a>liuxingyu</a> 
</div> 
<div id="id"> 
<a>liuxingyu</a> 
</div> 
<div id="id"> 
<a>liuxingyu</a> 
</div> 
</div> 
</body> 
</html>

(2) wrapAll 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script type="text/javascript" src="../jquery-2.0.0/jquery-2.0.0.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("div a").wrapAll("<div id='id'></div>"); 
}); 
</script> 
</head> 
<body> 
<div> 
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 
</div> 
</body> 
</html>

Firebug display results: 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 
<script type="text/javascript"> 
$(function() { 
$("div a").wrapAll("<div id='id'></div>"); 
}); 
</script> 
</head> 
<body> 
<div> 
<div id="id"> 
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 
</div> 
</div> 
</body> 
</html>

(3) the wrapInner 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 
<script type="text/javascript"> 
$(function() { 
$("div").wrapInner("<div id='id'></div>"); 
}); 
</script> 
</head> 
<body> 
<div> 
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 
</div> 
</body> 
</html>

Firebug display results: 
 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<script src="../jquery-2.0.0/jquery-2.0.0.js" type="text/javascript"> 
<script type="text/javascript"> 
$(function() { 
$("div").wrapInner("<div id='id'></div>"); 
}); 
</script> 
</head> 
<body> 
<div> 
<div id="id"> 
<a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> <a>liuxingyu</a> 
</div> 
</div> 
</body> 
</html>
Related articles: