如何用HTML元素替换jQuery对象？

Question

Here is my code:

 $(".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++){ stuffs_html += $staffs_container; } $(".staffs_container").replaceWith(stuffs_html); }) 

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

 <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" /> 

As you can see, it shows [object] instead of the HTML. How can I fix the problem?

Answer 1

Convert each item to html with this loc

 $staffs_container.html();

and also first empty the parent div, then append children to it

$(".staffs_container").removeClass("hide_staffs_container").empty().append(stuffs_html);

 $(".do").on("click", function() { var stuffs_html = "", num = 2; $staffs_container = $(".staffs_container").clone(); for (var i = 0; i < num; i++) { stuffs_html += $staffs_container.html(); } console.log(stuffs_html) $(".staffs_container").removeClass("hide_staffs_container").empty().append(stuffs_html); }) 

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

 <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" /> 

Answer 2

$staffs_container[0] contains the HTMLElement , grab it then use .outerHTML to get the HTML string

 $(".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++){ stuffs_html += $staffs_container[0].outerHTML; } $(".staffs_container").replaceWith(stuffs_html); }) 

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

 <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" /> 

Answer 3

I have updated you code..I think you expecting like this.

 $(".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++){
   stuffs_html += $staffs_container.html();
  }  
  $(".staffs_container").replaceWith($staffs_container);
});

http://jsfiddle.net/pf455/769/

Answer 4

Element objects and jQuery collections don't automatically output their markup when they're converted to strings (by += , in this case). However, you don't necessarily need them to be strings.

You can build up a collection (array) of element objects, which you can then provide to .replaceWith() at once. You'll need to make more clones, though.

 $(".do").on("click", function(){ var stuffs = [], num = 2; var $staffs_container = $(".staffs_container.hide_staffs_container"); for ( var i = 0; i < num; i++){ stuffs.push( $staffs_container.clone().removeClass("hide_staffs_container") ); } $(".staffs_container").replaceWith(stuffs); }) 

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

 <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" />