javascript - 将元素添加到 html 正文，并将变量作为文本

Question

我想用 javascript 创建类似的东西:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

等等。 我尝试这样做:

var i = 0;
function tick()
{
  document.body.innerHTML += '<div>i</div>';
  i++;
  setTimeout("tick()",1000);
}

但 div 元素包含变量名称，而不是变量值。有什么办法可以正确完成这项工作吗？

Answer 1

对于你的问题，我认为你可以使用 setInterval() 来做到这一点，如果你使用纯 JavaScript，则可以使用 DOM。

这里我给你举个例子，希望对你有帮助:D

var i = 0;

function hell () {
	i++
	var test = document.createElement("div")
	var node = document.createTextNode(i);
  
  test.appendChild(node)
  document.getElementById("a").appendChild(test);		
}

var interval = setInterval(hell, 1000);

function generateDiv() {
	setTimeout(interval, 10000)
}

function stopGenerate() {
  clearInterval(interval)
}

<button onclick="generateDiv()">
  Generate Div :D
</button>
<button onclick="stopGenerate()">
  Stop Generate
</button>
<div id="a">

</div>