如何querySelectorAll元素添加到DOM和javascript？

Question

我正在开发一个聊天应用程序，当我尝试向聊天室列表添加新元素、查看它们并在不重新加载页面的情况下与它们交互时，我的问题出现了。

我正在将 HTML 个元素添加到具有 JavaScript 的列表中。

然后我尝试查询列表中的SelectorAll元素。

可以select编辑页面加载时从服务器加载的元素。

但是带有 JavaScript 的新创建的元素似乎没有得到 selected。

以下是我如何尝试 select 我的元素，并在单击时为每个元素执行一些代码：

 document.querySelectorAll('.select-room').forEach(p => {
        p.onclick = () => { <my code here> })

已在列表中的元素 select 编辑得很好，我的代码执行正常。

但是当我用 JavaScript 添加一个新元素时。即使它的 HTML 看起来与其他现有元素的 HTML 一样，包括它获得 selected 的 class，结果是我只能select 重新加载页面后的那些。

有没有一种方法可以监听对 DOM 所做的更改，以便在添加 JavaScript 具有相同 class 的新元素后，它们将是 select像其他人一样无需重新加载页面？

这是我的问题 Minimal, Complete, Reproducible Example：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mcr problem</title>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        // Clicking element in the list shows an alert.
        document.querySelectorAll(".clickable").forEach(li => {
          li.onclick = () => {alert("interaction!")};
        });

        // Clicking on button adds new element to the list
        document.querySelector("#add-btn").onclick = () => {
          newLi = document.createElement("li");
          newLi.classList.add("clickable");
          newLi.innerHTML = "New Item";
          document.querySelector("#parent-list").append(newLi);
        };
      });
    </script>
  </head>
  <body>
    <h1>List of items</h1>
    <button id="add-btn">Add</button>
    <ul id="parent-list">
      <li class="clickable" id="post-1">Item 1</li>
      <li class="clickable" id="post-2">Item 2</li>
      <li class="clickable" id="post-3">Item 3</li>
    </ul>
  </body>
</html>

Answer 1

警报未被调用的原因 DOMContentLoaded
此事件在 DOM 树形成时触发，即脚本正在加载。在图像、CSS 和 JavaScript 等所有资源加载之前，脚本开始运行。您可以将此事件附加到 window 或文档对象
并且当时查询选择器只有 class .clickable 的 3 个节点，因此它仅适用于这 3 个元素。
在 javascript DOMNodeInserted
当脚本使用 appendChild()、replaceChild()、insertBefore() 等在 DOM 树中插入一个新节点时触发

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll(".clickable").forEach((li) => {
    li.onclick = () => commonAlertMethod();
  });
  // Clicking on button adds new elemnt to the list
  document.querySelector("#add-btn").onclick = () => {
    newLi = document.createElement("li");
    newLi.classList.add("clickable");
    newLi.innerHTML = "New Item";
    document.querySelector("#parent-list").append(newLi);
  };
});

document.addEventListener("DOMNodeInserted", () => {
  // Clicking element in the list shows an alert.
  document.querySelectorAll(".clickable").forEach((li) => {
    li.onclick = () => commonAlertMethod();
  });
});

function commonAlertMethod() {
  alert("interaction!");
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>List of items</h1>
    <button id="add-btn">Add</button>
    <ul id="parent-list">
      <li class="clickable" id="post-1">Item 1</li>
      <li class="clickable" id="post-2">Item 2</li>
      <li class="clickable" id="post-3">Item 3</li>
    </ul>
</body>
</html>

如何querySelectorAll元素添加到DOM和javascript？

How to querySelectorAll elements added to the DOM with javascript?

javascript

chat

flask

flask-socketio

cs50