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

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

我创建了一个用于存储div的变量，并尝试按如下方式创建它的多个实例：

（在与附加的defineBox对象的数量相关的内部循环中，我有一个逻辑错误，但这就是我所做的 单独工作，与本主题无关）

$（“#包装器”）.empty（）；
var lineBox=document.createElement（'div'）；
对于（var i=0；i每次调用此表达式时

$（'#包装器'）。附加（''）；

jQuery
创建一个新的
div
元素。在您共享的第一个示例中，使用
var lineBox=document.createElement（'div'）；
尝试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));
  }
}

$（“#包装器”）.empty（）；
var lineBox=document.createElement（'div'）；
$（'#包装器'）。追加（行框）；
对于（var i=0；ispot on！感谢您的解释。我想知道为什么我的方法“defineBox”（未包含在代码部分）采用这种方式工作，而这个循环没有，我只是注意到了它。谢谢您的提示，这个方法可能对我提到的“逻辑错误”有所帮助。
for(var i=0; i<size; i++){
  $('#wrapper').append('<div></div>');
  for(var j=0; j<size; j++){
    $("#wrapper > div ").append(defineBox(boxSize));
  }
}

$("#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));
  }
}