为何jQuery的html()方法在<p>标签中添加内容而非替换？

这其实是HTML规范的限制导致的，和jQuery本身没啥关系！

核心原因：

标签不能包含块级元素 #

HTML标准里明确规定，<p>是段落容器，它只能包含行内元素（比如<span>、<a>）或者纯文本，不能嵌套其他块级元素（比如<div>、<ul>、<h1>这些）。当浏览器遇到不符合规范的嵌套时，会自动修正DOM结构，把<p>里面的块级元素“移出去”。

你的代码实际发生了什么？ #

看你第一个例子的HTML：

<p id='pContainer'>
<div>paragraph text remains</div>
</p>

浏览器解析后，实际的DOM结构会变成这样：

<p id='pContainer'></p>
<div>paragraph text remains</div>
<p></p>

原来的<div>已经被移出了<p>标签，此时你调用$('#pContainer').html('<div>updated...</div>')，其实是给那个空的<p>标签添加内容，而原来的<div>根本不在<p>里面了——所以看起来“原有内容没被替换”，实际上是DOM结构早就被浏览器改了。

而第二个例子用<div>作为容器就没问题，因为<div>是通用块级容器，可以嵌套任何元素，浏览器不会修改它的DOM结构，所以html()方法能正常替换掉里面的内容。

验证方法 #

你可以打开浏览器的开发者工具（按F12），在Elements面板里查看实际的DOM结构，就能看到<p>标签已经被拆分，里面的<div>跑到外面去了。也可以在控制台输入：

console.log(document.getElementById('pContainer').innerHTML)

会发现输出是空字符串，进一步证实<p>标签里本来就没有内容。

解决方案 #

• 把容器换成<div>（就像你第二个例子那样），这是最简单的办法；
• 如果必须用<p>标签，不要在里面嵌套块级元素，换成行内元素或者纯文本，比如：

  <p id='pContainer'>
    <span>paragraph text remains</span>
  </p>
  

  这样html()方法就能正常替换内容了。

内容的提问来源于stack exchange，提问作者Hooman Bahreini