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

将会正确生成。

- Jon Cursi

---

请尝试添加实际的元素对象，而不是一个字符串。 - Sterling Archer

不，那实际上不是有效的HTML。请见：https://validator.w3.org/ - Josh Crozier

@SterlingArcher：jQuery的append与HTML字符串完全兼容。 - T.J. Crowder

@T.J.Crowder 我应该澄清一下 - 我知道它可以工作，只是（在我看来）构建对象更加简洁。 - Sterling Archer

知悉，我已更新我的答案以回应你的更新。 - T.J. Crowder

相关：为什么<p>标签不能包含其中的<div>标签？ - Oriol

Answer 1

如何在 <p> 或 <span> 中添加 <ul> 标签？

无法添加，这是无效的。因此你看到的是浏览器尝试重新排列以使其有效。

span元素 的内容模型（例如，它们允许在其中包含什么）是 "短语内容"（例如em等）。 p元素的情况也相同。 只有在期望 "流内容"（如段落和

）的地方才可以使用ul元素。

要修复它，请勿尝试将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 中，这正是您所说的结果。

话虽如此，浏览器会尽可能容忍无效的标记和结构。但使用有效的标记和结构通常是更好的选择。

- T.J. Crowder

Answer 2

正如已经解释的那样，您的标记是无效的HTML，不会按照您的预期进行解析。

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

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

不建议使用，因为语义上是错误的，但是可以实现。

- Oriol

---

当然，问题是，为什么有人想要这样做？这样做有什么目的，你不能用有效的HTML实现吗？ - Mr Lister

Answer 3

你正在将一个块级元素放在内联元素中。此外，通常不会在段落中放置列表。

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

- isherwood