jQuery wrapInner()

jQuery wrapInner() method is the used to wrap an HTML structure around the content of each element in the set of matched element.

Below the syntax of wrapInner().


Parameter Description
wrappingElement It is a mandatory parameter. It specifies what HTML elements are to be wrapped around the content of each selected element. Its possible values are:
  • HTML elements
  • jQuery objects
  • DOM elements
Function(index) It is an optional parameter. It specifies a function that returns the wrapping element.
  • Index:It provides the index position of the element in the set.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery wrapInner()</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
div{font-size:16px;height:40px;line-height:30px;width:300px;background:#11a286;padding:5px;color:#FFF;margin:0 0 10px 0}
$(document).ready(function() {
  $("#button").click(function() {
 <p>This is a paragraph.</p>
 <button style="margin:0 0 10px 0;background:#e8e8e8;" class="btn" id="button">Click here to wrap emphasized element around the content of p element</button><br />