通过jquery / Javascript大量添加新元素后，DOM是否立即准备就绪？

Question

首先，我是JS的新手。所以我在这里有一个示例JS。

<script>
    function main(){
      code_that_add_contents_to_dom();
      code_that_works_on_added_contents_on_dom();
    }
</script>

我一直在从事通常遇到上述情况的Web项目。让我们假设以下功能。

var code_that_add_contents_to_dom = function(){
  var parent = document.getElementById("id_1");
  var child = document.createElement('div');
  child.id = 'child_id_1';
  parent.appendChild(child);
  ...
}

上面的函数向dom添加了新元素，并假设有很多appendChild语句。现在，让我们创建一个功能，该功能适用​​于上述功能附加到DOM的元素。例如，让我们假设我们正在该元素中创建一个dataTable。

var code_that_works_on_added_contents_on_dom = function(){
   var dataTable = $('#child_id_1').dataTable(); // or something similar that 
                                                 // works on previously added                        
                                                 //elements
}

现在让我们假设我调用了函数main（）。问题在于第二个函数要么生成错误，要么什么都不做。但是，如果我编写如下的主要功能：

<script>
        function main(){
          code_that_add_contents_to_dom();
          setTimeout(function(){
              code_that_works_on_added_contents_on_dom();
          },some_millisecs);
        }
 </script>

如果some_millisecs具有某个值，例如说500（在我的特定情况下），则一切正常。所以这是问题。

1. 即使在操作方法返回后，DOM操作方法是否也要花费时间来对DOM进行实际更改？
2. 在这种情况下，我可以遵循的最佳实践是什么？
3. 还是我错过了一些简单的事情？

编辑 我一直在从操作DOM的函数中获得返回和使用引用的答案。我想说清楚，并非总是如此。假设我不想从JSON文件创建dataTable（Bootstrap）。在函数中，code_that_add_contents_to_dom();我解析JSON并动态创建标记为

<table id='example'>
 <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
            </tr>
 </thead>
<tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
            </tr>
             <tr>
                <td>Roxi</td>
                <td>System Admin</td>
            </tr>

</tbody>

</table>

现在，第二个函数code_that_works_on_added_contents_on_dom();将数据表初始化为示例div。

现在，我遇到了类似的问题，因为表标记是动态生成的，所以第二个函数初始化了dataTable，但显示“未找到数据”。但是它与添加setTimeOut一起工作以在一定延迟后初始化数据表。

我实际上通过使用dataTable.addRow（）方法来解决此问题。但是我想知道的是，为什么在DOM操作函数返回后就不准备好DOM？我希望我能说清楚

再次感谢！！

Answer 1

code_that_works_on_added_contents_on_dom您可以在创建元素时使用已经获得的引用，而不是查找刚刚创建的元素的引用。

旁白 1：混合纯 DOM 函数 ( document.getElementById("child_id_1")) 和 jQuery ( $('#child_id_1')) 会让人感到困惑。如果您选择一种方法并坚持使用，那么一切都会变得更具可读性和更容易。

旁白 2：code_that_add_contents_to_dom您查找具有 ID 的元素child_id_1，但将相同的 ID 分配给您创建的新元素。我认为示例代码中存在错误。不管你怎么用child.ID，反正都是错的，应该是这样child.id。另外，使用我的方法，您无论如何都不需要分配 ID，因为您将使用现有的引用。

例子：

<script>
    function main(){
      var createdElements = code_that_add_contents_to_dom();
      code_that_works_on_added_contents_on_dom(createdElements.elementA, createdElements.elementB);
    }

var code_that_add_contents_to_dom = function(){
  var parent = $("#child_id_1"); // Use jQuery everywhere
  var child = $("<div>");
  parent.appendChild(child);
  return {
    elementA: parent,
    elementB: child
  };
}  

code_that_works_on_added_contents_on_dom(parent, child) {
  child.dataTable();
}
</script>