Creating a
inside a
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. ```

``` 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 = "

var color =

type a color

;

" $infoHandler.append(htmlString); circleCounter++; }); ``` Here is the code for that http://jsfiddle.net/mauricioSanchez/tJkex/ Is there any way around this? Thanks!

Accepted Answer

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 = "

var color = type a color ;

" ```

Creating a <div> inside a <p> dynamically

Solution

Problem

Related problems