为什么使用 html 和 jquery 变量附加 div 有不同的输出？

Question

试图解决与 javaScript 和 JQuery 相关的实践，遇到了一个我无法确定的问题。

我创建了一个变量来存储一个div，并尝试创建它的多个实例如下：

(there is a logical mistake I have in inner loop related to the number of appended defineBox objects but this is something I am working on separately,not related to this topic)

 $("#wrapper").empty();
 var lineBox=document.createElement('div');

for(var i=0; i<size; i++){
  $('#wrapper').append('lineBox');
  for(var j=0; j<size; j++){
    $("#wrapper > div ").append(defineBox(boxSize));
  }
}

代码执行时，在html文档中只显示"lineBox"div。 defineBox 附加到 lineBox div.

当我改用下面的代码时，它显示 "i" 次 'div' 就像循环中预期的那样，每个 'div' 都包含 'defineBox's.

for(var i=0; i<size; i++){
  $('#wrapper').append('<div></div>');
  for(var j=0; j<size; j++){
    $("#wrapper > div ").append(defineBox(boxSize));
  }
}

我认为用 document.createElement('div') 创建一个 var 会得到与 '<div></div>' 相同的结果。差异从何而来？

Answer 1

每次这个表达式调用

$('#wrapper').append('<div></div>');

jQuery 创建一个新的 div 元素。在您分享的第一个示例中，新的 div 元素仅使用 var lineBox=document.createElement('div');

创建了一次

Answer 2

试试jQuery的.clone()方法。您正在 dom.

中创建 div 的一个实例

$("#wrapper").empty();
var lineBox=document.createElement('div');
$('#wrapper').append(lineBox);
for(var i=0; i<size-1; i++){
  $('#wrapper').append(lineBox.clone());
  for(var j=0; j<size; j++){
    $("#wrapper > div ").append(defineBox(boxSize));
  }
}

这里是jQuery的克隆方法的文档： https://api.jquery.com/clone/

为什么使用 html 和 jquery 变量附加 div 有不同的输出？

Why appending a div using html and jquery variable has different outputs?

html

javascript

loops

append