How to disable jQuery closing the P-tag for you?

Question

var wrapper = $('<p><div class="text">Hello World</div></p>');
console.log(wrapper.html());

Becomes

<p></p><div class="text">SOMETHING</div><p></p>

How can you avoid the HTML being messed up like that?

ANSWER : I did not realize putting a DIV inside a paragraph was invalid HTML.

It's invalid to have a div inside a p: http://stackoverflow.com/questions/4291467/nesting-block-level-elements-inside-the-p-tag-right-or-wrong . — Andrew Morton, May 06 '12 at 15:27
*How can you avoid the HTML being messed up like that?* Create valid HTML :P The browser will always try to correct invalid HTML... — Felix Kling, May 06 '12 at 15:28

score 6 · Answer 1 · answered May 06 '12 at 15:27

6

div is not supported within p

answered May 06 '12 at 15:27

thecodeparadox

score 0 · Answer 2 · answered May 06 '12 at 15:27

0

Try

var wrapper = $('<p></p>').html('<div class="text">Hello World</div>');
console.log(wrapper);

answered May 06 '12 at 15:27

debianek

Florian Margaine · Answer 3 · 2012-05-06T15:40:40.567

0

var wrapper = $( '<p></p>').append(
    $( '<div></div>' )
        .text( 'Hello World' )
        .attr( 'class', 'text' )
);

Or just using innerHTML from your comments:

var wrapper = document.createElement('p');
wrapper.innerHTML = '<div class="text">Hello World</div>';
console.log( wrapper );

edited May 06 '12 at 15:40

answered May 06 '12 at 15:27

Florian Margaine

I appreciate your reply however I am loading html content from an external source and try to add that to the DOM, but all P get messed up like that. – Mark May 06 '12 at 15:28

3 Answers3