HTML如何动态变化？

Question

所以我想在每次有人点击我网站上的按钮时添加一个变量。 我对 HMTL 很陌生，所以我不知道该怎么做。 我搜索过的所有示例都只是将文本更改为其他文本，而不是添加到变量中。

如果有人想启发我如何做到这一点，我会非常重视它。

 function changeIt() { document.getElementById('test').innerHTML = "<h2>Congrats</h2>"; }

 <div id="test"> <b> <var> Test </ var> </b> </div> <button onclick="changeIt()">Test</button>

Answer 1

 var sum = 0; function changeIt() { sum++; document.getElementById('test').innerHTML = `<h2> ${sum} </h2>`; }

 <div id="test"> <b> <var> Test </ var> </b> </div> <button onclick="changeIt()">Test</button>

Answer 2

您在document.innerHTML中编写的代码是正确的。 为了使其动态化并在屏幕上添加新的Congrats而不是仅仅修改旧的，您需要保留一个全局计数器并对其进行循环。

let count = 0;
function changeIt() {
   count++;
   for (let i=0;i<count;i++) {
      document.getElementById('test').innerHTML = '';
      let h2 = document.getElementById('test').createElement;
      h2.innerHTML = "Congrats";
      document.getElementById('test').appendChild(h2);
   }
}

由于您在每次单击按钮时都调用changeIt function，它将让您更新计数并循环计数以将Congrats 'count' 次数添加到您的 div。