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

您需要将i的值与字符串连接起来。

document.body.innerHTML += '<div>' + i + '</div>';
//                            ---^^^^^^^^^---

＆＃13;

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

＆＃13;

上述解决方案每次都会完全重新创建体内的元素，而是生成一个dom元素并附加到保留旧元素的主体上。

＆＃13;

var i = 0;

function tick() {
  // create div element
  var div = document.createElement('div');
  //set content
  div.innerHTML = i;
  // append to the body
  document.body.appendChild(div);
  i++;
  setTimeout("tick()", 1000);
}

tick();

＆＃13;

Answer 2

请使用此

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

内部使用双引号内容是什么，外部它被视为javascript语法，即作为变量

Answer 3

您需要突破字符串

中的值

document.body.innerHTML += '<div>'+ i +'</div>';

Answer 4

你正在使用'<div>i</div>'使'我'只是一个字符，因为它是引号之间的字符串，你需要在两个字符'<div>'和'</div>'之间连接它的值

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

Answer 5

您已将值设置为字符串文字'<div>i</div>'。你需要将i视为一个变量。 '<div>'+i+'</div>'应该做到这一点。

Answer 6

<强>的问题：

连接（没有连接 i 被视为字符而不是变量。）
没有调用函数（不确定因为你没有发帖）

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

<body></body>

注意：目前，该函数在没有任何事件的情况下被调用，但您可以在点击，加载等事件上触发它。

Answer 7

您需要将变量i放在单引号之外，如下所示：

document.body.innerHTML += '<div>' + i + '</div>';

这样JS就会知道你想要使用它的价值，而不是文字＆＃34;我＆＃34;。

另请注意，您已启动i = 0;，这意味着第一个输出值为<div>0</div>。要使第一个值为1，您应该在输出值之前启动i = 1;或增加它的值，而不是在之后。

Answer 8

对于您的问题我认为您可以使用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>

使用变量作为文本向{h> body添加元素

8 个答案: