如何用HTML元素替换jQuery对象？修复显示[object]问题

你看到页面显示[object]的核心原因是：你直接把jQuery对象和字符串进行拼接了。当JavaScript尝试将jQuery对象转换为字符串时，默认会输出[object Object]，这就是为什么你看到了非预期的内容。

解决方法1：获取jQuery对象的完整HTML字符串 #

要获取jQuery对象对应的完整HTML代码（包括元素本身），你需要使用.prop('outerHTML')方法（或者直接访问DOM元素的outerHTML属性），而不是直接拼接jQuery对象。

修改后的JavaScript代码如下：

$(".do").on("click", function(){ 
  var stuffs_html = "", num = 2; 
  $staffs_container = $(".staffs_container").clone().removeClass("hide_staffs_container"); 
  for ( var i = 0; i < num; i++){ 
    // 这里改为获取元素的完整HTML字符串
    stuffs_html += $staffs_container.prop('outerHTML'); 
  } 
  $(".staffs_container").replaceWith(stuffs_html); 
})

解决方法2：用jQuery的DOM操作替代字符串拼接（更推荐） #

其实你完全可以避免字符串拼接，直接用jQuery的DOM操作方法来实现需求，这种方式更符合jQuery的设计思路，也更不易出错：

$(".do").on("click", function(){
  var num = 2;
  // 创建一个临时容器来存放克隆的元素
  var $tempContainer = $('<div>');
  
  for (var i = 0; i < num; i++){
    // 每次克隆一个独立的实例并移除隐藏类
    var $clonedStaff = $(".staffs_container").clone().removeClass("hide_staffs_container");
    $tempContainer.append($clonedStaff);
  }
  
  // 用临时容器里的内容替换原容器
  $(".staffs_container").replaceWith($tempContainer.contents());
})

为什么这两种方法能解决问题？ #

• 方法1中，prop('outerHTML')会返回当前jQuery对象对应的DOM元素的完整HTML代码（包括元素自身的标签和内部内容），这样拼接后得到的是合法的HTML字符串，而非对象的字符串表示。
• 方法2直接操作DOM元素，全程不需要处理字符串，克隆后的元素直接被添加到临时容器中，最后替换原容器，逻辑更清晰，也避免了字符串拼接可能带来的潜在问题。

完整可运行代码 #

下面是修改后的完整代码示例：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="staffs_container hide_staffs_container">
  <input class="staff_name" type="text" name="name" required placeholder="name" />
  <input class="staff_mobile" type="text" name="mobile" required placeholder="mobile" />
  <hr />
</div>
<input type="button" class="do" value="click" />

CSS

.hide_staffs_container{ display: none; }
input{ display: block; }

JavaScript（推荐方法2）

$(".do").on("click", function(){
  var num = 2;
  var $tempContainer = $('<div>');
  
  for (var i = 0; i < num; i++){
    var $clonedStaff = $(".staffs_container").clone().removeClass("hide_staffs_container");
    $tempContainer.append($clonedStaff);
  }
  
  $(".staffs_container").replaceWith($tempContainer.contents());
})

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