jquery
  1. jquery-wrapinner
PreviousNext

jQuery wrapInner()

jQuery wrapInner() is a built-in method that allows you to wrap an HTML structure around the content of an element.

Syntax

$().wrapInner(wrapper)

The wrapper parameter in the above syntax can be a string of HTML elements, a jQuery object, or a function that generates HTML content.

Use

JQuery wrapInner() is useful for adding additional HTML structure around the existing content of an element. This can be useful for formatting and styling text or adding additional elements such as buttons or links.

Example

Here is an example of how to use jQuery wrapInner() to add a wrapper element around the content of a div:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery wrapInner() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("div").wrapInner("<p class='wrapper' />")
        });
    </script>
    <style>
        .wrapper {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>
        Hello, this is some text!
    </div>
</body>
</html>
Try Playground

In this example, we use jQuery wrapInner() to add a p element with the class of "wrapper" around the existing text content of the div. We also use CSS to add a border and padding to the new wrapper element.

Summary

jQuery wrapInner() is a useful method for adding additional HTML structure around the content of an element. It can help you format and style text or add additional elements to your HTML content. Give it a try in your next jQuery project!

wrap()wrapAll()
Published on: