Javascript 如何将jquery div正确附加到html

我在div中有输入和按钮：

<div>
  <input id='input_id_0' value='name'>
  <button type="button" id="remove_id_0"></button>
</div>

但该代码导致文本

object[object]object[object]

被附加到我的原始输入中。JSFiddle：

---

请您向我解释一下为什么会发生这种情况以及如何解决它好吗？

因为您使用的是jquery，所以不需要像那样使用

document.getElementById

或

document.createElement

。所有这些都可以使用jquery完成：

var-input=$（'input'）.clone（）；
var input_id=input.prop（'id'）；
input_id=input_id.substr（input_id.length-1,1）；
var button=$（'button'）.clone（）；
var button_id=button.prop（'id'）；
按钮id=按钮id.substr（按钮id.length-1，1）；
prop（'id'，'input_id_'+++input_id）；
按钮.prop（'id'，'remove_id_'+++按钮_id）；
var div=$（''）.append（输入）.append（按钮）；
div.insertAfter（“div”）

btn

<div>
  <input id='input_id_0' value='name'>
  <button type="button" id="remove_id_0"></button>
</div>
<div>
  <input id='input_id_1' value='name'>
  <button type="button" id="remove_id_1"></button>
</div>

    cloneCount = 0;
    cloneCount += 1;
    var div = document.createElement('div');
    var previousInput = document.getElementById('input_id_' + (cloneCount-1))
    var newInput = $(previousInput)
         .clone(true)
         .attr('id', 'input_id_' + cloneCount)
    previousInput.append(newInput)

    var previousRemoveBtn = document.getElementById('remove_id_' + (cloneCount-1))
    var newRemoveBtn = $(previousRemoveBtn)
         .clone(true)
         .attr('id', 'remove_id_' + cloneCount)

   div.append(newInput)
   div.append(newRemoveBtn)

   $(previousInput).parent().after(div)