在前端开发中，我们可能需要动态地创建新的 DOM 元素并将其添加到页面中。但是，在某些情况下，我们需要知道这些元素是否已经成功地添加到了页面中。本文将介绍几种方法来判断一个动态创建的 DOM 元素是否已经被添加到了页面中。
方法一：使用 document.contains()
我们可以使用 document.contains() 方法来判断一个元素是否被添加到了 DOM 中。这个方法接收一个参数，即需要检查的元素，并返回一个布尔值表示该元素是否存在于当前文档中。
示例代码
----- ---------- - ------------------------------ -------------------------------------- -- ---------- ------------------------------------------- -- -- ----
在上面的示例代码中，我们首先创建了一个新的 div 元素并将其添加到了页面中。然后，我们使用 document.contains() 方法来判断该元素是否存在于文档中，并将结果输出到控制台中。由于我们已经将该元素添加到了页面中，因此 document.contains() 方法返回的结果为 true。
方法二：使用父元素的 contains() 方法
除了使用 document.contains() 方法外，我们还可以使用父元素的 contains() 方法来判断子元素是否已经被添加到了 DOM 中。这个方法与 document.contains() 方法类似，只不过是在一个指定的元素上进行判断。
示例代码
----- ------------- - ---------------------------------- ----- ---------- - ------------------------------ -------------------------------------- -- ----------- ------------------------------------------------ -- -- ----
在上面的示例代码中，我们首先获取了一个父元素，并创建了一个新的 div 元素并将其添加到了该父元素中。然后，我们使用父元素的 contains() 方法来判断子元素是否存在于父元素中，并将结果输出到控制台中。由于我们已经将该元素添加到了父元素中，因此 contains() 方法返回的结果为 true。
方法三：使用 MutationObserver
除了以上两种方法之外，我们还可以使用 MutationObserver 来监测 DOM 变化，并在新元素被添加到页面中时触发相应的回调函数。
示例代码
----- ---------- - --------------
----- ------ - - ---------- ---- --
----- -------- - ----------------------- --------- -
------- -------- -- -------------- -
-- -------------- --- ------------ -
------- --------- -- -------------------- -
--------------------- --- ------ -
---------------- ------- ----- -- ------ -----------
-
-
-
-
--
----- -------- - --- ---------------------------
---------------------------- --------
----- ---------- - ------------------------------
-------------------------------------- -- ----------在上面的示例代码中，我们首先创建了一个 MutationObserver 对象，并指定了需要监测的目标节点以及相应的配置。然后，我们定义了一个回调函数，在新元素被添加到页面中时触发。在回调函数中，我们可以通过遍历 mutation.addedNodes 属性来查找新添加的元素，并进行相应的处理。
结论
以上是三种判断动态创建的 DOM 元素是否被添加到页面中的方法。使用这些方法，我们可以更好地控制和管理页面中的元素，并提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/26595