javascript - 如果参数是数组，jQuery 的 html() 方法会自动加入参数吗？

Question

在试验时，我遇到了这个问题。

<div id="result"></div>
<script type="text/javascript">
$('#result').html(['<p>This is inside an array</p>', '<em>This is second item in array</em>']);
</script>

重新编辑页面后，我可以在浏览器控制台中看到以下标记:

<div id="result">
   <p>This is inside an array</p>
   <em>This is second item in array</em>
</div>

如果提供给 .html() 方法的参数是一个数组，这是否意味着 jQuery 正在后台运行 array.join("") ？

我找不到文档中提到的这个，因此很想知道更多。

Answer 1

当传递除字符串以外的任何内容时，.html()清空元素并使用 .append()改为附加 HTML，当给定一个数组时，它会按照它们出现的顺序将 HTML 字符串插入数组中。此行为仅记录为 .append() .

事实.html()使用 .empty().append()在内部传递既不是字符串也不是函数的参数时，其文档页面中未说明。最接近的是 jQuery 以几乎相同的方式清空元素的语句 when given a function ，尽管这确实遵循相同的 .empty().append()代码路径。

请注意，这实际上并没有调用 Array.join()以您期望的方式。它将数组中每个字符串表示的元素一个一个地附加到数组中，而不是在通过 innerHTML 插入之前先连接所有字符串。 .因此，例如，以下缺少(可选)</p>结束标签的行为相同——它不插入 p包含 em child ，而是一个p和一个 em作为 sibling ，按顺序:

$('#result').html(
  [
    '<p>This is inside an array',
    '<em>This is second item in array</em>'
  ]
);