Question

我正在尝试使用单击功能在p内创建一个div。但似乎没有关闭我的p元素。显然，在阅读this之后，如果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/

有什么方法吗？

谢谢！

Answer 1

你很简单在div内不能<{1}}，因为p元素中允许的唯一内容是短语内容（如上所述）在您阅读的文档中），通常表示内联元素。这就是为什么在未关闭的p之后紧跟div（或任何其他流元素，例如ul或figure）将隐式关闭p并创建作为兄弟姐妹，而不是孩子，在DOM中。

您可以使用p代替，并在需要时将其显示为块：

span

Answer 2

div不允许在p内，请参阅 Why <p> tag can't contain <div> tag inside it?

浏览器认为您忘记附上p标记，因此它会在div之前隐式添加结束标记。

Answer 3

我想你想要css属性溢出：滚动？

在<p>动态</p> </div>中创建<div>

3 个答案: