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

Question

运行以下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>

将正确生成。

Answer 1

  

如何在<ul>或<p>中添加<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而不用包装它。

重新更新：

  

如果将以下标记添加到html文档

     

...

     

然后在您喜欢的浏览器中打开页面，它将正确打开。试试吧！

当然 - 因为浏览器会重新排列它。例如，这个片段：

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

由Chrome转换为此DOM：

请注意ul或p中span 不的方式 - 这正是您所说的结果。

也就是说，浏览器会执行批次来尝试容忍无效的标记和结构。但是使用有效的标记和结构通常是可行的方法。

Answer 2

您将块级元素放在内联元素中。此外，您通常不会在列表中放置列表。

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

Answer 3

如前所述，您的标记是无效的HTML，不会按预期进行解析。

但是，你仍然可以使用DOM操作来完成它。

{
  "fornecedores" : {
    "-K7XNT_UrCyuM4KLfptO" : {
      "5b0beab0-d32a-4115-b346-25a8d3e1fffe" : {
        "email" : "jequiti5@gmail.com",
        "logo" : "J.jpg",
        "nome" : "Jequiti Cosméticos 5"
      }
    },
}

不推荐，因为它在语义上是错误的，但它是可能的。