jQuery Dom Wrap Manipulation
.wrap()
.unwrap()
.wrapAll()
.wrapInner() Source Code
Expand
//Original HTML
<p>test<p>
//after jQuery.wrap()
$("p").wrap("<div></div>")
//Yields HTML
<div><p>test</p></div>
.unwrap()
//Original HTML
<div><p>test</p></div>
//jQuery.unwrap()
$("p").unwrap()
//Yields HTML
<p>test</p>
.wrapAll()
//Original HTML
<p>test1</p>
<p>test2</p>
//jQuery.wrapAll()
$("p").wrapAll("<div></div>")
//Yields HTML
<div>
<p>test1</p>
<p>test2</p>
</div>
.wrapInner()
//Original HTML
<p>test1</p>
//jQuery.wrapInner()
$("p").wrapInner("<strong></strong>")
//Yields HTML
<p><strong>test1</strong></p>
Example$.wrap(), $.unwrap(), $.wrapInner(), $.wrapAll()
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- Javascript -->
<script type="text/javascript">
$(document).ready(function (){
$("#ele433").click(function(){
if($(this).text() == "wrap"){
$(this).text("unwrap");
$("#ele432").wrap("<div class=\"ex2\"></div>");
}else{
$(this).text("wrap");
$("#ele432").unwrap();
}
});
$("#ele434").click(function(){
if($(this).text() == "wrap all"){
$(this).text("unwrap all");
$("#ele431 li").wrapAll("<div class=\"ex2\"></div>");
}else{
$(this).text("wrap all");
$("#ele431 li").unwrap();
}
});
$("#ele435").click(function(){
if($(this).text() == "wrap inner"){
$(this).text("unwrap inner");
$("#ele431 li").wrapAll("<font color=\"red\"></font>");
}else{
$(this).text("wrap inner");
$("#ele431 li").unwrap();
}
});
});
</script>
<!-- HTML -->
<a name="#wrap-unwrap-wrapinner-wrapall"></a>
<style>
#example-section43 .ex1{
float:left;margin-right:10px;
margin-bottom:10px;
border:1px solid black;
width:100px;height:60px;
text-align:center;
}
#example-section43 .ex2{
border:5px solid red;
width:100px;height:60px;
}
</style>
<div id="example-section43">
<div id="ele432" class="ex1">div1</div>
<div style="clear:both"></div>
<button id="ele433" type="button">wrap</button>
<br><br>
<div id="ele431">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<div style="clear:both"></div>
<button id="ele434" type="button">wrap all</button>
<button id="ele435" type="button">wrap inner</button>
</div>