Jquery: How to Wrap an HTML Structure Around a Text Selection

Written by sara williams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Jquery: How to Wrap an HTML Structure Around a Text Selection
Use the "wrap" function to wrap tags around the selected text. (Burke/Triolo Productions/Brand X Pictures/Getty Images)

The jQuery scripting library is useful for adding and removing code to HTML document-based user actions, and you can also use jQuery scripting to animate parts of your Web pages. If you want to add tags around some text on a Web page, you can use the "wrap" function of jQuery. Select the text using a CSS selector -- code to target HTML tags -- in a function and then write your code to wrap tags around it.

Skill level:


  1. 1

    Add the jQuery library to your Web page. Grab this code and put it somewhere above your closing </head> tag but above any other <script> tags:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

    The above code grabs jQuery from the Google Code server.

  2. 2

    Write your "document ready" function between a new set of <script> tags somewhere below the tag that references the jQuery library. Here is how it looks:

    <script type="text/JavaScript(document).ready(function() {

       // Your code will go here



    The "document ready" function makes your jQuery code wait for the page to load before it tries to run. Using this will help prevent errors on your Web page.

  3. 3

    Create a new function to select the part of your Web page that you want to wrap tags around. Select text by its tag name and then an ID or class name like you would in CSS. Look at the HTML file for your Web page to determine which tag to select.

    Here is an example function:

    $('selector').each(function() {

    // Code will go here


    Change "selector" with a CSS selector such as "p .wrapme" for a <p> tag with a class name of "wrapme." When selecting by an ID, change the dot in front of the ID name to a hash symbol.

  4. 4

    Copy and paste this code between the curly braces in your selector function:

    $(this).wrap('<tagname>' + this + '</tagname>');

    Change "tagname" to the name of the tag you want to wrap around your selected text. You can add attributes to the tag as well. In this code, "this" is shorthand for your selector. Your new tags will go outside the selected tags.

Tips and warnings

  • Learn the basics of CSS to get a better understanding of how to use jQuery, which is designed for use with CSS. Since jQuery is a JavaScript library, learn JavaScript to improve your jQuery skills.
  • Always save your HTML and CSS files before editing them.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.