javascript - 如何将函数应用于具有相同类的所有新元素，但仅适用于新创建的元素？ (JS函数)

Question

我在页面上有一个元素列表，我想只对新创建的元素运行一个函数。问题是当我再次调用该函数时，它将函数应用于所有具有相同类的元素。

<ul>
    <li class="element">Created on load 1</li>
    <li class="element">Created on load 2</li>
    <li class="element">Created dynamicly 1</li>
    <li class="element">Created dynamicly 2</li>
</ul>

在上面的示例代码中，我有一个类为 element 的元素列表。我想调用一个只在动态创建的元素上运行的函数，即。加载页面时不是 DOM 中的那些

Answer 1

您可以使用 MutationObserver API 来监听元素的子列表的变化。以下示例演示了一种可能的用法。大部分是无耻地从MDN中复制过来的网站。

const targetNode = document.querySelector('ul');

const config = {
  attributes: false,
  childList: true,
  subtree: false
};

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    }
  }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

///
document.querySelector('button').addEventListener('click', () => {
  const li = document.createElement('li');
  li.textContent = 'dynamically added';
  li.classList.add('element');
  
  document.querySelector('ul').appendChild(li);
});

<ul>
  <li class="element">Created on load 1</li>
  <li class="element">Created on load 2</li>
</ul>

<button>Add more elements</button>