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

Question

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

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

我一直在做一个网络项目，那个里经常会遇到上述情况。让我们假设以下函数。

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>