如何 select 跨越一个动态生成的按钮？

Question

问题：如何仅使用 JavaScript?

更新动态生成的按钮内跨度的 innerHtml

我正在构建一个 'like' 功能（想想社交媒体），用户可以在其中 like/unlike 发帖，但我不知道如何 select 具体值跨越用户点击。我只能使用 .find('span')

找到 jQuery 解决方案

const htmlBtn = `<button class="count"><span>0</span></button>`;

const create = document.getElementById("create");
create.addEventListener("click", (e) => {
  const container = document.createElement("div");
  container.className = "container";

  container.innerHTML = htmlBtn;
  document.getElementById("app").append(container);
});

const app = document.getElementById("app");
app.addEventListener("click", (e) => {
  const btn = e.target;
  /*
  each time someone click nth button, span within nth button increments by 1
  
  let count = document.querySelector("span").innerHTML;
  count++;
  document.querySelector("span").innerHTML = count;
  */
});

<button id="create">Create</button>

<div id="app"></div>

预期结果：用户单击该按钮仅将该按钮的跨度增加 1。

Answer 1

e.target.children 将为您提供 button 的所有子项的数组，数组的第 0 个索引应该是您的 span 元素，然后您可以使用 innerHTML方法。

在你的情况下，

let count = parseInt(e.target.children[0].innerHTML);
e.target.children[0].innerHTML = count + 1;

Answer 2

create.addEventListener("click", (e) => {
  const container = document.createElement("div");
  container.className = "container";

  container.innerHTML = htmlBtn;
  document.getElementById("app").append(container);

  container.addEventListener("click", (e) => {
    const value = +e.target.innerHTML;
    e.target.innerHTML = (value + 1).toString();
  });
});

如何 select 跨越一个动态生成的按钮？

How to select span within a dynamically generated button?

javascript

html