Question

我试图将同一个对象多次附加到同一个区域，但它不起作用。

 $("div").each(function(){
   var $input = $("<input type=text/>").css("display","none");
   $(this).append($input).append($input);  // <--this only shows 1 box
 }

我尝试了$(this).append($input + $input);，但它显示了[object Object]两次。建议？

Answer 1

怎么样

var $input = $(document.createElement('input')).attr('type','text').css({display:'none'});
$(this).append($input.clone()).append($input.clone())

Answer 2

通过执行$input + $input他们都运行了.toString()方法，因此您基本上正在运行.append("[object Object][object Object]")

并且通过执行.append($input).append($input);，您尝试在同一个包含元素中追加相同的DOM Element两次，这是不可能的，因为只有一个实例将存在。解决方案是克隆DOM元素，您可以通过.clone()在jQuery中执行此操作，并通过.cloneNode()在vanilla javascript中执行此操作。

你可以尝试

$("div").each(function(){
    var $input = $("<input type=text/>").css("display","none");

    $(this)
        .append($input) // use the original element
        .append($input.clone()); // clone the original element
}

Answer 3

试试这个，它会起作用：

$("div").each(function(){
var $input = $("<input type=text/>").css("display","none");
var $input_2 = $("<input type=text/>").css("display","none");
$(this).append($input).append($input_2);  // 
}

将多个对象附加到元素

3 个答案: