javascript – 如何在P或span标签中附加ul标签？

运行以下jQuery：

$('body').append('<p><span><ul><li>test</li></ul></span></p>');

我希望这个：

<p>
  <span>
    <ul>
      <li>test</li>
    </ul>
  </span>
</p>

但结果如下：

<p>
  <span></span>
</p>
<ul>
  <li>test</li>
</ul>

为什么ul标签突破了span和p？这是有效的HTML标记.

*更新*

p标签似乎是问题所在.如果您运行以下内容：

$('body').append('<span><ul><li>test</li></ul></span>');

然后

<span>
  <ul>
    <li>test</li>
  </ul>
</span>

会正确生成.

解决方法:

How to append a <ul> tag inside a <p> or <span>?

你不能,这是无效的.所以你看到的是浏览器试图重新排列它以使其有效.

span elements的内容模型(例如,它们允许在其中具有的内容)是“phrasing content”(像em等等). (与p elements相同.)ul elements仅在预期“flow content”(如段落和div)的情况下有效.

要解决此问题,请勿尝试将ul放入span或p中.你可以删除span和p并使用div,例如：

$('body').append('<div><ul><li>test</li></ul></div>');

…或者直接使用ul而不用它周围的包装.

重新更新：

If you add the following markup to an html document

…

And then open the page in your favorite browser, it will open correctly. Try it!

当然 – 因为浏览器会重新排列它.例如,这个片段：

<p>
  <span>
    <ul>
      <li>test</li>
    </ul>
  </span>
</p>

由Chrome转换为此DOM：

注意ul如何不在p或span内 – 这正是你所说的结果.

也就是说,浏览器在尝试容忍无效标记和结构方面做了很多工作.但是使用有效的标记和结构通常是要走的路.