使用jQuery附加后，子元素出现在AFTER之后而不是IN元素

Question

I am appending the following using jQuery:

var dateWrapper = '<p class="date">'+kendo.format('{0:dd MMMM yyyy}',new Date(date))+'<div class="triangle"></div></p>'
$('.wrapper').append(dateWrapper)

I want the triangle to appear inline or inline-block with the date. Once appended the DIV is placed after the P, and not inside. Cannot fathom why this would happen.

Answer 1

You can not put div inside p tag. It will automatically put it outside the p tag. You should use..

var dateWrapper = '<p class="date">'+kendo.format('{0:dd MMMM yyyy}',new Date(date))+'<span class="triangle"></span></p>';
$('.wrapper').append(dateWrapper);

In css

.triangle{
display:inline;
}

Answer 2

According to the HTML5 documentation ( and as far as i know it's the same for older versions ) , p accepts as children only pharsing content

p element

Pharsing content means plain text or pharsing elements which include <a> , </span> , <strong> etc. but not <div>

pharsing content

So a structure like <p><div></div></p> is not a valid HTML5 structure, so it is automatically converted into <p></p><div></div><p></p> .

In conclusion you CAN NOT nest div inside p and that's why you don't get the desired result. I suggest, in your case, change the triangle from div to span