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

Question

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

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

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

 $("#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”。

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 的 clone 方法的文档： https://api.jquery.com/clone/