append() "<tr> element" 25 次到"<table> element" 但是<table>运行 HTML 时只有 1 行

Question

谁能解释一下为什么这个循环在"code1"不增加25 -元素到表?(我是新手)

表中只有一行的代码(code1):https://jsfiddle.net/yuLr3p6s/2/

alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
let tr = $("<tr></tr>"); // create tr Element with Jquery
for (let i = 0; i < alphabet.length; i++) {
let td = "<td>" + alphabet[i] + "</td>";
tr.append(td);
}

/* append tr Element to the end of Table element twenty-five times
and table will have twenty five rows*/
for (let i = 1; i <= 25; i++) {
$("table").append(tr);
}

table, td {
border: 1px solid black;
border-collapse: collapse;
}

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

表中有25行的代码(code2):https://jsfiddle.net/yuLr3p6s/1/

alphabet = ["A","B","C","D","E","F","G","H","I","J","K"        ,"L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
let tr = "<tr>"; // create tr Element with Jquery
for (let i = 0 ; i < alphabet.length ; i++) { 

let td = "<td>" + alphabet[i] + "</td>";
tr += td;
}
tr += "</tr>";

/* append tr Element to the end of Table element twenty-five times
and table will have twenty five rows*/
for (let i = 1; i <= 25 ; i++) {     
$("table").append(tr);
}

table, td {
border: 1px solid black;
border-collapse: collapse;
}

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

Answer 1

代码:

let tr = $("<tr></tr>");

创建一个DOM节点，而

let tr = "<tr>";

创建一个字符串。

当你在DOM节点上使用jquery方法如.append()和.appendTo()时，jquery将移动节点，而不是创建新的节点。

相同的方法与字符串将创建新的节点;这就是为什么它可以在第二个代码片段中工作。

TBH，从jquery文档中看不太清楚，在中间有一小行:

https://api.jquery.com/append/

如果以这种方式选择的元素被插入到DOM中的其他位置，它将被移动到目标位置(而不是克隆):

Answer 2

插入到一行内Try put in the loop:

let td = "+字母[i] + ";