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

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

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

上面的函数向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>

现在，第二个函数

code\u在dom（）上添加了内容将数据表初始化为示例div

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

实际上，我使用dataTable.addRow（）方法解决了这个问题。但我想知道的是，为什么DOM操纵函数一返回，DOM就没有准备好？我希望我说清楚了

再次感谢
 在创建元素时，您可以使用已经获得的引用，而不是在dom中添加内容，而不是使用
code\u

旁白1：混合使用纯DOM函数（
document.getElementById（“child\u id\u 1”）
）和jQuery（
$（''child\u id\u 1'）
）是令人困惑的。如果你选择一种方法并坚持它，那么一切都会变得更可读、更容易

旁白2：在向dom添加内容的
code\u中，您查找ID为
子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>


函数main（）{
var createdElements=将内容添加到dom（）的代码；
在dom（createdElements.elementA、createdElements.elementB）上添加内容的代码；
}
将内容添加到dom=function（）的变量代码{
var parent=$（“#child_id_1”）；//到处使用jQuery
var child=$（“”）；
父、子（子）；
返回{
elementA：家长，
要素B：儿童
};
}  
在dom上添加内容的代码（父、子）{
dataTable（）；
}
document.createElement（“”）
你应该只通过
div
创建两个函数，然后在
add\u changes（）
函数的末尾调用
make\u changes（）
函数，这是一种方法-但是，在我们知道你在做什么更改之前，我们不能100%确定。对不起，我的错误，我要做一个编辑..谢谢你的指点。只是打字错误；）@DarrenSweeney…我已经试过了…仍然没有成功：（你能为你看到的实际问题创建一个最小的复制品吗？你在尝试什么，即使结合使用vanilla JS创建/附加元素和jQuery操作它。@RoToRa…假设我的代码是正确的，它将元素附加到dom。我喜欢你建议的方式，并会尝试。不过，我的问题是为什么这样做我的代码表现不同，仅在与setTimeout一起使用时才起作用，这使我意识到只要操纵函数返回，DOM就没有准备好？@phoenix您是否在异步执行某些操作，例如使用AJAX加载表数据？我确信我没有这样做。我唯一做的是初始化数据表。在只有在标记生成函数返回后保持一定的延迟时，初始化才起作用。@phoenix jquery DataTables可以与AJAX一起工作。您需要展示一个工作示例来演示问题。请尝试构建一个测试用例，例如在jsfiddle.com上
<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>

<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>