如何在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

如何在<p>或<span>附加<ul>標簽？

你不能，這是無效的。 所以你看到的是瀏覽器試圖重新排列它以使其有效。

span元素的內容模型（例如，它們允許在其中具有的內容 ）是“ 短語內容 ”（諸如em類的內容）。 （對於p元素也是如此 。） ul元素僅在需要“ 流內容 ”（如段落和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操作來完成它。

 document.body .appendChild(document.createElement('p')) .appendChild(document.createElement('span')) .appendChild(document.createElement('ul')) .appendChild(document.createElement('li')) .appendChild(document.createTextNode('test')) 

不推薦，因為它在語義上是錯誤的，但它是可能的。