jQuery append向已追加DOM元素添加子元素不生效问题

可以直接向已完成追加的DOM元素继续追加子元素，你遇到的判断返回"No"、行元素下无子元素的问题，和DOM追加机制无关，是代码索引计数逻辑错误导致的。

错误原因 #

你的row_index自增时机不对：

1. 外层循环每次开始时，你用当前的row_index值拼接id创建行元素追加到页面，比如第一次循环row_index初始值为0，创建的行id是row_0
2. 创建完行你立刻执行row_index += 1把索引加了1，此时row_index变成1
3. 进入内层循环遍历行内元素时，你查找的是id为row_1的元素，这个元素此时还没被创建，所以选择器返回长度为0，触发"No"提示，后续追加子元素的操作也会因为找不到对应父节点失败，最终行元素下没有任何子内容。
   另外你原始代码里alert("no")还缺少一个前引号，属于语法错误，运行时也会报错。

修复方案 #

把row_index += 1的逻辑挪到内层循环全部执行完成之后即可，修复后的代码如下：

var row_index = 0;
for (let row of object_data){
  $("#data-screen").append(`<div style='width:100%' class='row' id='row_${row_index}'></div>`)
  for (let elem of row){
      if ($(`#row_${row_index}`).length > 0){
        alert("yes")
      } else {
        alert("no")
      }
      $(`#row_${row_index}`).append(`<div style='border-bottom:1px solid black;' class='col-md-${column_counter}'>${elem}</div>`)
  }
  // 当前行所有子元素追加完成后再更新索引
  row_index += 1;
}

优化建议 #

不需要每次追加子元素都通过id重新查找DOM节点，在创建行元素时直接保存jQuery对象引用即可，既避免索引写错的问题，也能提升性能：

var row_index = 0;
for (let row of object_data){
  // 创建行元素时直接保存引用，追加到容器中
  const $currentRow = $(`<div style='width:100%' class='row' id='row_${row_index}'></div>`).appendTo("#data-screen");
  for (let elem of row){
    // 直接用保存的引用追加子元素，不需要反复查询DOM
    $currentRow.append(`<div style='border-bottom:1px solid black;' class='col-md-${column_counter}'>${elem}</div>`)
  }
  row_index += 1;
}

内容的提问来源于stack exchange，提问作者Jane