jQuery .html() method closing
tag issue?

Question

I'm loading in some html via ajax and inserting it into the DOM. Here is the part of the recieved data, outputted into the console:

<div class="devices">
    <h3> Devices </h3>
    <p> 
        <div class="device-icon android-icon"></div>
        <div class="device-icon iphone-icon"></div>
        <div class="device-icon blackberry-icon"></div>
    </p>
</div>

As you can see, the p tags are arranged fine. However, when I insert the data into the dom with jQuery's html() method, this is how it's actually appended:

<div class="devices">
    <h3> Devices </h3>
    <p></p>
        <div class="device-icon android-icon"></div>
        <div class="device-icon iphone-icon"></div>
        <div class="device-icon blackberry-icon"></div>
    <p></p>
</div>

What's going on with the p tags?

@Blazemonger I'd say that that question is closely-related, but the original poster asked this in the context of jQuery not working as expected. I'm not convinced that this is an exact duplicate. — , Apr 17 '14 at 22:35

score 7 · Accepted Answer · edited May 23 '17 at 10:26

7

The reason why the javascript parser is doing this is actually because <p> tags are not allowed to include <div> tags within the HTML spec. Please refer to the html specification and this question (Why <p> tag can't contain <div> tag inside it?).

edited May 23 '17 at 10:26

Community

1
1

answered Apr 17 '14 at 21:35

PressingOnAlways

11,948
6
32
59

2

*"The reason why jquery is doing this"* -> *"The reason **the browser** is doing this"* – Kevin B Apr 17 '14 at 21:37
Can't believe I'm only finding out about this now! You learn something new every day. Thank you. – styke Apr 17 '14 at 21:37
1

@styke Accept the answer if it answers your question. Thanks. :) – PressingOnAlways Apr 17 '14 at 21:39

jQuery .html() method closing tag issue?

1 Answers1

jQuery .html() method closing
tag issue?