为何向jQuery的.replaceWith()传入jQuery对象会替换为"[object Object]"？

我有一个包含多个<li>元素的页面，尝试用jQuery把其中一个<li>替换成一组元素。但当我给replaceWith()传入jQuery对象或jQuery对象数组时，目标元素被替换成了数组每个项对应的字符串"[object Object]"。

初始测试代码 #

JavaScript #

let newElement = $("<li class='myClass'></li>");
$("#myListItem").replaceWith(newElement);

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li id="myListItem"></li>
  </ul>
</div>

预期结果 #

<div class="container">
<ul>
<li class='myClass'></li>
</ul>
</div>

实际结果 #

<div class="container">
<ul>
[object Object]
</ul>
</div>

@Barmar和@Bergi的判断是正确的——某些原因导致调用jQuery对象的.replaceWith()时，实际触发了原生DOM的replaceWith()方法。以下代码完全复现了我遇到的现象（我的代码表面上调用的是jQuery方法，但实际行为和这段代码一致）：

复现代码 #

JavaScript #

let newElement = $("<li class='myClass'>New li</li>");
let newElement1 = $("<li class='myClass'>New li</li>");
let newElement2 = $("<li class='myClass'>New li</li>");

let elementArray = [newElement, newElement1, newElement2]

document.getElementById('myListItem').replaceWith(elementArray);

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul>
    <li id="myListItem"></li>
  </ul>
</div>

核心问题 #

原生DOM的replaceWith()不支持直接传入jQuery对象或jQuery对象数组，它会把传入对象直接转为字符串，因此出现[object Object]的结果。你的代码触发原生方法的原因，大概率是$("#myListItem")没有正确获取到jQuery对象——比如jQuery未正确加载、选择器返回空集合，或者代码中存在变量污染覆盖了jQuery的$标识符。

修复方案 #

1. 确保调用jQuery版本的replaceWith()
   检查jQuery是否正确引入，若存在全局变量冲突，改用jQuery()代替$()：

   let newElement = jQuery("<li class='myClass'></li>");
   jQuery("#myListItem").replaceWith(newElement);
   

2. 转原生DOM元素后调用原生方法
   如果必须使用原生replaceWith()，需要把jQuery对象转为原生DOM元素，数组需展开为单个元素传入：

   let elementArray = [newElement[0], newElement1[0], newElement2[0]];
   document.getElementById('myListItem').replaceWith(...elementArray);
   

3. 用jQuery方法批量处理元素
   jQuery的replaceWith()支持传入DOM元素、HTML字符串或jQuery对象集合。要替换成多个元素，可直接传入合并后的jQuery对象：

   // 方式1：直接拼接HTML字符串
   let $newElements = $("<li class='myClass'>New li</li><li class='myClass'>New li</li><li class='myClass'>New li</li>");
   $("#myListItem").replaceWith($newElements);
   
   // 方式2：合并多个jQuery对象
   let newElement = $("<li class='myClass'>New li</li>");
   let newElement1 = $("<li class='myClass'>New li</li>");
   let newElement2 = $("<li class='myClass'>New li</li>");
   $("#myListItem").replaceWith(newElement.add(newElement1).add(newElement2));
   

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