jQuery wrapInner() Method

Last Updated:

jQuery wrapInner() Method

The jQuery wrapInner() method inserts an HTML structure around the content of each inner elements.

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery wrapInner() Method</h1> <p>This is paragraph</p> <p>This is paragraph</p> <button>wrapInner</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").wrapInner("<strong></strong>"); }); }); </script> </body> </html>

Syntax

$(selector).wrapInner(wrappingElement); // or $(selector).wrapInner(func);

Parameter Values

Value Explanation
wrappingElement Specifies what HTML element(s) to wrap around the content of each selected element.
func(index) Specifies a function that returns the wrapping element.
Parameter Value:
  • index - Receives the index position of the element in the set

Browser Support

Devicedesktopmobile
Browsergoogle chromesafarifirefoxinternet Exploreredgeoperagoogle chromesafarifirefoxedgeoperaandroid webviewsamsung internet
wrapInner()YesYesYesYesYesYesYesYesYesYesYesYesYes

wrapInner() using Function

Example

HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <h1>jQuery wrapInner() Method</h1> <p>This is paragraph</p> <p>This is paragraph</p> <button>wrapInner</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").wrapInner(function(){ return "<strong></strong>"; }); }); }); </script> </body> </html>

Share this Page

Meet the Author