Javascript append() " element" 二十五次到 " element" 但
在运行 HTML 时只有 1 行

有人能解释一下为什么"code1"中的这个循环没有向表中添加25个元素吗?(我是个新手)

表中只有1行的代码(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>

推荐答案

您的代码:

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

创建DOM node ,而

let tr = "<tr>";

创建字符串.

当您在DOM node 上使用诸如.append().appendTo()之类的jQuery方法时,jQuery将move个该 node ,而不是创建新 node .

带有字符串的相同方法将创建新 node ;这就是为什么它在第二个代码片段中起作用.

Tbh,jQuery文档中不是很清楚,大约有一条小线向下:

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

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

Javascript相关问答推荐

使用TMS Web Core中的HTML模板中的参数调用过程

如何最好地从TypScript中的enum获取值

类型脚本中只有字符串或数字键而不是符号键的对象

拖放仅通过 Select 上传

Exceljs:我们在file.xlsx(...)&#中发现了一个问题'"" 39人;

Angular 17—每当一个布尔变量变为真时触发循环轮询,只要它保持为真

jQuery s data()[storage object]在vanilla JavaScript中?'

将旋转的矩形zoom 到覆盖它所需的最小尺寸&S容器

在286之后恢复轮询

虚拟滚动实现使向下滚动可滚动到末尾

在JS中拖放:检测文件

当从其他文件创建类实例时,为什么工作线程不工作?

将范围 Select 器添加到HighChart面积图

如何根据输入数量正确显示alert ?

我怎样才能得到一个数组的名字在另一个数组?

如何在Java脚本中并行运行for或任意循环的每次迭代

输入数据覆盖JSON文件

在AgGrid中显示分组行的单元格值

使用JAVASCRIPT-使用If和Else If多次判断条件-使用JAVASRIPT对象及其属性

在采购unpept-visalizations.js时遇到问题