javascript - 将元素添加到 DOM 但 JS 不知道它在那里

Question

我在鼠标点击按钮时向 DOM 添加一个元素。

该元素正在添加到 DOM，我在检查时可以看到它。然而，在同一个鼠标上 - 将元素添加到 DOM 后 - 我想操作该元素，但我无法这样做，因为当 DOM 第一次加载时，具有唯一 id 的新元素不存在。

我收到此错误，因为新创建的元素实际上不存在:Uncaught TypeError: Cannot set property 'innerHTML' of null

如何“更新”DOM 中存在的内容，以便 JS 可以看到更改的内容并识别任何新元素和 id？

const likeWrapper = document.getElementById("likeWrapper");
let yourLikeTotal = 0;
let mouseDown = 0;
const yourLikes = document.getElementById("yourLikes_postid_" + yourLikeTotal);

document.body.onmousedown = function() { ++mouseDown }
document.body.onmouseup = function() { --mouseDown }


const addToYourLikes = () => {
  console.log(yourLikeTotal)
  console.log(yourLikes)
  yourLikes.innerHTML = yourLikeTotal
  yourLikeTotal++
  console.log("addToYourLikes");
}

const moveYourLikes = () => {
  yourLikes.classList.add("move-your-likes")
  setTimeout( () => { 
  yourLikes.classList.remove('move-your-likes');
    console.log("remove class")
}, 800);
  console.log("moveYourLikes");
}

const addEl = () => {
  const id = "yourLikes_postid_" + yourLikeTotal;
  const div = '<div id=' + id + ' ' + 'class="your-likes">0</div>';
  likeWrapper.innerHTML += div;
}


likeWrapper.addEventListener("mouseup", () => {
  /* if mousedown and up execute 1 button animation -
  while mousedown do not end animation, just keep adding to totals
  */
  addEl();
  addToYourLikes();
  moveYourLikes();
})

body {
  font-family: sans-serif;
  font-size:13px;
  user-select: none;
}

main {
  margin: 160px 0 0 0;
  width: 100%;
}

.like-button-wrapper {
  display:flex;
  width: 30px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

.like-button {
  position:absolute;
  z-index:1;
  width:30px;
  height:30px;
  border:2px solid red;
}

.like-total {
  line-height:30px;
  margin: 0 0 0 40px;
}

.your-likes {
  width:20px;
  height:20px;
  font-size:10px;
  text-align:center;
  border-radius: 50%;
  background:#989898;
  color:#fff;
  position:absolute;
  left:5px;
  z-index:0;
  line-height:20px;
  margin: 0 10px 0 0;
  opacity:1;
}

.move-your-likes {
  -webkit-animation-name: moveLikes;
  -webkit-animation-duration: 0.8s;
}

@keyframes moveLikes {
  from { top:0; opacity:0; }
  to { top: -40px; opacity:1; }
}

  <div class="like-button-wrapper" id="likeWrapper">
    <div class="like-button" id="likeButton"></div>
  </div>

Answer 1

如果您希望事件处理程序附加到动态添加的元素，则必须将它们作为“节点”(document.createElement()) 插入 DOM (.appendChild()) code>)，而不是 HTML 字符串 (.innerHTML)。

此外，在创建元素之前，您无法设置 DOM const yourLikes 引用。您必须在将其添加到 DOM 后执行此操作。因此，最初需要将其声明为 var 或 let 变量，然后仅在 DOM 元素存在于 DOM 中后才进行初始化。

const likeWrapper = document.getElementById("likeWrapper");
let yourLikeTotal = 0;
let mouseDown = 0;
var yourLikes = null; // Can't get reference here. It doesn't exist yet!

document.body.onmousedown = function() { ++mouseDown }
document.body.onmouseup = function() { --mouseDown }


const addToYourLikes = () => {
  console.clear();
  console.log(yourLikes, yourLikeTotal)
  yourLikes.innerHTML = yourLikeTotal
  yourLikeTotal++
  // console.log("addToYourLikes");
}

const moveYourLikes = () => {
  yourLikes.classList.add("move-your-likes")
  setTimeout( () => { 
  yourLikes.classList.remove('move-your-likes');
    // console.log("remove class")
}, 800);
  // console.log("moveYourLikes");
}

const addEl = () => {
  const id = "yourLikes_postid_" + yourLikeTotal;
  // New elements should be created and inserted as nodes:
  const div = document.createElement("div");
  div.id = id;
  div.classList.add("your-likes");
  div.textContent = "0";
  likeWrapper.appendChild(div);
  yourLikes = div;  // Now, set the higher scoped variable to the new element
}


likeWrapper.addEventListener("mouseup", () => {
  /* if mousedown and up execute 1 button animation -
  while mousedown do not end animation, just keep adding to totals
  */
  addEl();
  addToYourLikes();
  moveYourLikes();
})

body {
  font-family: sans-serif;
  font-size:13px;
  user-select: none;
}

main {
  margin: 160px 0 0 0;
  width: 100%;
}

.like-button-wrapper {
  display:flex;
  width: 30px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

.like-button {
  position:absolute;
  z-index:1;
  width:30px;
  height:30px;
  border:2px solid red;
}

.like-total {
  line-height:30px;
  margin: 0 0 0 40px;
}

.your-likes {
  width:20px;
  height:20px;
  font-size:10px;
  text-align:center;
  border-radius: 50%;
  background:#989898;
  color:#fff;
  position:absolute;
  left:5px;
  z-index:0;
  line-height:20px;
  margin: 0 10px 0 0;
  opacity:1;
}

.move-your-likes {
  -webkit-animation-name: moveLikes;
  -webkit-animation-duration: 0.8s;
}

@keyframes moveLikes {
  from { top:0; opacity:0; }
  to { top: -40px; opacity:1; }
}

<div class="like-button-wrapper" id="likeWrapper">
    <div class="like-button" id="likeButton"></div>
  </div>