I've got a code you see below:

<div class="categories-list">
Description One
<ul>
    <li>
        <span>CATEGORY1</span>
        <span>CATEGORY2</span>
        <span>CATEGORY3</span>
    </li>
</ul>
</div>

What I want to do is to select the text "Description one" which has no tag around it and wrap it with the tag (specifically h2) using jQuery, so the final code would look like:

<div class="categories-list">
<h2>Description One</h2>
<ul>
    <li>
        <span>CATEGORY1</span>
        <span>CATEGORY2</span>
        <span>CATEGORY3</span>
    </li>
</ul>
</div>

I know that I can use wrap() function to get the second thing done. The selecting part is the one I've got the problem with.

I've got a code you see below:

<div class="categories-list">
Description One
<ul>
    <li>
        <span>CATEGORY1</span>
        <span>CATEGORY2</span>
        <span>CATEGORY3</span>
    </li>
</ul>
</div>

What I want to do is to select the text "Description one" which has no tag around it and wrap it with the tag (specifically h2) using jQuery, so the final code would look like:

<div class="categories-list">
<h2>Description One</h2>
<ul>
    <li>
        <span>CATEGORY1</span>
        <span>CATEGORY2</span>
        <span>CATEGORY3</span>
    </li>
</ul>
</div>

I know that I can use wrap() function to get the second thing done. The selecting part is the one I've got the problem with.

• javascript
• jquery

1 Answer 1

Simple wrap can't do the job until you walk over the contents of the element:

$(".categories-list").contents().first().wrap("<h2 />");

DEMO: http://jsfiddle/MDhvY/