[英]Creating a <div> inside a <p> dynamically
我正在尝试使用单击功能在ap内创建一个div。 但似乎没有关闭我的p元素。 显然,看完后本 ,似乎如果P元素紧跟在这种情况下,一个div它不需要在年底关闭标签。
<div class="main"></div>
<div class="content-list"><ul class="information"> </ul></div>
我将使用此函数追加到:
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++;
});
这是代码
http://jsfiddle.net/mauricioSanchez/tJkex/
有没有办法解决?
谢谢!
你很简单, p
不能有div
,因为p
元素中允许的唯一内容是短语内容(如你所阅读的文档中所述),这通常意味着内联元素。 这就是为什么在未关闭的p
紧跟一个div
(或任何其他流元素,如ul
或figure
)将隐式关闭该p
并在DOM中创建为兄弟,而不是子元素。
您可以使用span
并在需要时将其显示为块:
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>"
div
不允许在p
里面,看看为什么<p>标签里面不能包含<div>标签呢?
浏览器认为您忘记将p
标记括起来,因此它会在div
之前隐式添加结束标记。
我想你想要css属性溢出:滚动?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.