Reload/refresh DOM 具有事件后创建的新元素

Question

我想访问在某个事件之后创建的元素。这些元素在原来的DOM.
中是缺失的，例如-

var inputs = document.getElementsByClassName('some class name');
//do some event to open a new div popup
var newInput = document.getElementsByClassName('new class name in the new div popup');

现在，如何访问 newInput？
如果我什么都不做，它将是 undefined。如果我能以某种方式 reload/refresh DOM 那么我将能够访问这些新元素。

location.reload(); 不会工作，因为它会刷新整个页面并且我之前的所有值都将丢失，例如 inputs

单击按钮时会附加新的 div。

点击事件之前：

<div class="some class name"></div>

点击事件后：

<div class="some class name"></div>
<div class="new class name in the new div popup"></div>

Answer 1

您可以使用 MutationObserver 来观察特定的 DOM 元素并在满足 MutationObserver 中的条件时执行逻辑：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

简单来说：

观察例如一个 'parent' 元素，其中 'receives' 您要定位的 DOM 个元素
只要插入新元素，MutationObserver 就会运行并允许您运行基于它的自定义代码
如果您不需要在 MutationObserver 使用后继续观察元素，您也可以断开 Observer。

Reload/refresh DOM 具有事件后创建的新元素

Reload/refresh the DOM with new elements that are created after an event

javascript

jquery

dom

browser

refresh