Creating a <div> inside a <p> dynamically

Question

I'm trying to create a div inside a p with a click function. But it seems not to close my p element. Apparently after reading this, it seems that if the p element is immediately followed by a div in this case it doesn't require a closing tag at the end.

<div class="main"></div>
<div class="content-list"><ul class="information"> </ul></div>

I'm going to append to the with this function:

var $contentHandler = $(".content-list");
var $mainHandler = $(".main");
var $infoHandler = $(".information");
var circleCounter = 1;



$mainHandler.click(function() {
    var htmlString = "<li class='" + circleCounter + "'> <p class='circle-color'> var   color = <div class='circle-color-input' contentEditable autocorrect='off'> type a color</div> ; </p> <p class='circle-radius'> </p> <p class='circle'> </p> </li>"
    $infoHandler.append(htmlString);
    circleCounter++;


});

Here is the code for that

http://jsfiddle.net/mauricioSanchez/tJkex/

Is there any way around this?

Thanks!

Answer 1

You quite simply cannot have a div inside a p, because the only kind of content allowed in a p element is phrasing content (as stated in the document you've read), which usually means inline elements. That's why having a div (or any other flow element such as ul or figure) immediately following an unclosed p will implicitly close that p and be created as a sibling, not a child, in the DOM.

You can use a span instead and make it display as a block if needed:

var htmlString = "<li class='" + circleCounter + "'> <p class='circle-color'> var   color = <span class='circle-color-input' contentEditable autocorrect='off'> type a color</span> ; </p> <p class='circle-radius'> </p> <p class='circle'> </p> </li>"