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.

<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!

You quite simply *cannot* have a div inside a p. It just doesn't work. You can use a span instead and make it display as a block if needed. — BoltClock, Apr 24 '14 at 03:36
P is a block level element, and as such shouldn't contain other block level elements. — flauntster, Apr 24 '14 at 03:40
@C-link I'm just simulating if I were appending code, don't pay attention to that — mauricioSanchez, Apr 24 '14 at 03:41
@flauntster your statement is wrong, why block level cannot contain block level element div is block level and and p is block level then
about what do you think ? — Bhojendra Rauniyar, Apr 24 '14 at 03:41
OK, I'll post it as an answer so your question won't remain unanswered. — BoltClock, Apr 24 '14 at 03:42
Everiting is posible if you will just look at this http://jsfiddle.net/tJkex/2/ — franki3xe, Apr 24 '14 at 03:54

score 4 · Accepted Answer · answered Apr 24 '14 at 03:43

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

score 2 · Answer 2 · edited May 23 '17 at 10:32

2

div is not allowed to be inside p, see Why <p> tag can't contain <div> tag inside it?

The browser think you forgot to enclose the p tag, so it implicitly adds a closing tag before div.

edited May 23 '17 at 10:32

Community

1
1

answered Apr 24 '14 at 03:47

Rankaba

399
3
11

score -1 · Answer 3 · answered Apr 24 '14 at 03:46

-1

I think you want the css property overflow:scroll ?

answered Apr 24 '14 at 03:46

Ben

1

Creating a inside a dynamically

3 Answers3

Creating a
inside a
dynamically