jQuery | How to Wrap & Unwrap Multiple Html Elements

How to Wrap elements inside a div or selected HTML elements. How to unwrap anchor tag links without removing the text content or elements. Using the jQuery wrap (), wrapAll() & unwrap method, You can easily wrap & unwrap selected HTML elements.

How to wrap multiple selected html elements ? How to remove wrapper elements but keep text content as it is using jQuery? jQuery provide several methods for performing this operation such as wrap(), wrapAll(), unwrap().

Elements Wrap or Unwrap jQuery

jQuery wrap() Method

Using jQuery wrap () to wrap specified HTML elements around each selected element.

Syntax wrap() Method

$(selector).wrap(element,function(index));

Parameters of wrap() method

  • Element :- It is a mandatory parameter.
  • Function(index) It is an optional parameter.

jQuery wrap() method By Example

This example will demostrate you how use wrap method to selected html elements. Wrap elements inside a div using jQuery Wrap method.

<!DOCTYPE html>  
<html>  
<head>  
<title>Example Demo Of jQuery Wrap Method</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("#wrapBtn").click(function(){  
        $(".myClass").wrap("<div class='wrapDiv'></div>");  
    });  
});  
</script>  
<style>  
.ctrCls{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
.wrapDiv{background-color: red;}  
</style>  
</head>  
<body> 
<div class="ctrCls"> 
<p class="myClass">Hello Programmers!</p>  
<p class="myClass">This is tutsmake.com</p>  
<button id="wrapBtn">Wrap a div element around each myClass element</button>  
</div>
</body>  
</html>  

 

Output

Example Demo Of jQuery Wrap Method

Hello Programmers!

This is tutsmake.com

jQuery wrapAll() Method

In a set of matched elements, using jQuery wrapAll () to wrap specified HTML elements around all selected elements.

Syntax wrapAll() Method

$(selector).wrapAll(Element);

Parameters of wrapAll () method

  • Element :- It is a mandatory parameter.

jQuery wrapAll() method By Example

This example will demostrate you how use wrapAll method to selected html elements.

<!DOCTYPE html>  
<html>  
<head>  
<title>Example Demo Of jQuery WrapAll Method</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("#wrapBtn").click(function(){  
        $(".myClass1").wrapAll("<div class='wrapDiv'></div>");  
    });  
});  
</script>  
<style>  
.ctrCls{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}
.wrapDiv{background-color: red;}  
</style>  
</head>  
<body> 
<div class="ctrCls"> 
<p class="myClass1">Hello Programmers!</p>  
<p class="myClass1">This is tutsmake.com</p>  
<button id="wrapBtn">Wrap a div element around each myClass1 element</button>  
</div>
</body>  
</html>  

 

Output

Example Demo Of jQuery WrapAll Method

Hello Programmers!

This is tutsmake.com

jQuery unwrap() Method

Using jQuery unwrap () to unwrap specified HTML elements around each selected element.

Syntax unwrap() Method

$(selector).unwrap(); 

jQuery unwrap() method By Example

This example will demostrate you how use unwrap method to selected html elements.

<!DOCTYPE html>  
<html>  
<head>  
<title>Example Demo Of jQuery unwrap Method</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script>  
$(document).ready(function(){  
    $("#unwrap").click(function(){  
        $(".link").wrapAll(""); 
        $("p").find("a.link").contents().unwrap();
    });  
});  
</script>  
<style>  
.ctrCls{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
} 
</style>  
</head>  
<body>
<div class="ctrCls">    
<p>If you click on the following button, it will remove the anchor tag from <a href="#" class="link"> this link </a>, but will keep the text content as it is.</p>
<button type="button" id="unwrap">Click Here For Unwrap Link</button>
</div>
</body>  
</html>  

Output

Example Demo Of jQuery unwrap Method

If you click on the following button, it will remove the anchor tag from this link , but will keep the text content as it is.

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *