Question

我不确定这里到底发生了什么，我认为该变量是一个jquery对象。

这只追加一次，我的问题是为什么？

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

虽然这可行，但我认为

var newInput = '<input>';
$('#newDiv').append(newInput);
$('#newDiv').append(newInput);

感谢您的帮助！

Answer 1

在第一种情况下，$将解析你的html并创建一个新的jQuery对象，它将包裹HTMLInputElement。

基本上，它就像在做：

var $newDiv = $('#newDiv'),
    newInput = document.createElement('input');

$newDiv.append(newInput);
$newDiv.append(newInput);

在第二种情况下，它每次解析html，为每个实例生成不同的jQuery对象。

以下是第一个样本的修复方法：

var newInput = $('<input/>');
$('#newDiv').append(newInput);
$('#newDiv').append(newInput.clone());

Answer 2

执行$('<input/>')时，jQuery会为您创建一个input DOM元素。

当你.append()一个DOM元素时，它会将元素与之前的位置分开。 (See Fiddle)。来自the docs：

如果以这种方式选择的元素插入到单个位置在DOM的其他地方，它将被移动到目标（未克隆）。

因此，您的第二次.append()调用会将其从首先附加的位置移除，并将其置于新位置。

附加字符串时，DOM元素会在追加时创建。

Answer 3

这是因为在第一种情况下，它指的是相同的元素对象（追加相同的元素，以便它附加到新的地方），在第二种情况下，你将html附加为字符串，所以它附加多个元素（每次都是新元素）。

Answer 4

append方法实际上会移动元素，因此，如果您在调试器中使用不同的div标签检查此代码，您将看到该元素将被创建一次，然后移至下一个div（以您为例）同一分区为了解决这个问题，您可以在每次附加元素时使用clone方法来创建该元素的新克隆。

示例HTML：

<div id="hello">
  
</div>

JS：

function addToDiv(div,data){
  $('#'+div).append(data)
}

$(document).ready(function() {
  
  let temp = $('<p>').html('hello')
  addToDiv('hello',temp.clone());
  addToDiv('hello',temp.clone());

});

Answer 5

您可以通过每次使用循环创建新元素来追加多个元素：

(function(){
  for(var i=0; i<10; i++){
    var newInput = $('<input>');
    $('#newDiv').append(newInput);
}})();

input {border:1px solid red; margin:3px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newDiv"></div>

jQuery多次追加一个Object

5 个答案: