How to wrap a tag around a text inside a tag?

Question

For example I have this piece of code:

<div class="myclass">Hello everybody!</div>

Then I want to wrap a <p> tag around the text to have this:

<div class="myclass"><p>Hello everybody!</p></div>

How can I do this with jQuery?

I tried this:

$('.myclass').text().wrap('p');

But didn't work.

Answer 1

You can do this using .wrapInner() :

$('.myclass').wrapInner('<p></p>');

Demo: Fiddle

Answer 2

try something like this

        $(function(){
            $('.myclass').wrapInner('<p></p>');
        })

REFERENCE :

http://api.jquery.com/wrapInner/

Alternative

        $(function(){
            var txt = '<p>' + $('.myclass').text() + '</p>'; 
            $('.myclass').html(txt);
        })

Again to remove p tag

        $(function(){
            var txt = $('.myclass').text();
            $('.myclass').html(txt);
        })

Answer 3

A Different approach,

$('.myclass').html('<p>' + $('.myclass').text() + '</p>');

DEMO

To unwrap the tag you simply do like this,

$(".myclass").html($('.myclass > p').text());

DEMO