时间戳

首页 > 解决方案 > 使用 Javascript 显示每个按钮单击的 HTML 内容

javascript - 使用 Javascript 显示每个按钮单击的 HTML 内容

问题描述

我有以下JS代码：

const items = document.querySelectorAll('#new-item');
const serviceline = document.querySelector('#service-line');


for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', (event) => {
    let output = ''
    output += `<p>hello</p>`;
    console.log(output)
    serviceline.innerHTML = output;
  });
}
<div id="service-line">
</div>
<button type="button" id="new-item" class="btn">Add New Item</button>

而且我想在每次单击按钮时多次在“输出”中显示数据。如果我 console.log 输出我得到正确的结果。我希望 HTML 显示在每次单击按钮时显示一个带有“hello”的新行。

标签： javascripthtml

解决方案

只需在 serviceline.innerHTML += output 中添加一个加号；当前，当您单击该按钮时，它会覆盖服务热线。+ 会将新值与过去的值相加。

const items = document.querySelectorAll('#new-item');
const serviceline = document.querySelector('#service-line');


for (let i = 0; i < items.length; i++) {
  items[i].addEventListener('click', (event) => {
    let output = ''
    output = `<p>hello</p>`;
    console.log(output)
    serviceline.innerHTML += output;
  });
}
<div id="service-line">
</div>
<button type="button" id="new-item" class="btn">Add New Item</button>

推荐阅读