带<br/>换行符的赋值

360doc客户端 2019-01-16

展开全文

今天一下午因为一个带<br/>换行符的赋值给搞蒙圈了，折腾了半天才恍然大悟！

菜鸟起飞的第N天，今天把js基础知识又看了一遍，发现自己的知识体系都是bug！

废话不多说了，直接来记录下今天的总结：

<!DOCTYPE html>  
<html>  
<body>  
<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p>  
<button onclick="myFunction()">点击这里</button>  
<p id="demo"></p>  
<script>  
function myFunction()  
{  
var x="",i=0;  
for (i=0;i<10;i++)  
  {  
  if (i==3)  
    {  
    break;  
    }  
  x=x + "The number is " + i + "<br>";  
  }  
document.getElementById("demo").innerHTML=x;  
}  
</script>    
</body>  
</html>

以上这段代码本来是学习break的用法的，然而我却发现了其他的问题：

以下是这段代码的正确输出结果：

而我原本的理解是输出结果应该为：

The number is 0
The number is 0The number is 1
The number is 0The number is 1The number is 2

然而明显这是错误的理解！

首先，document.getElementById("demo").innerHTML=x; 这个输出结果是在循环体外的，所以他只输出最后一次循环结果，其次，就算把他放到循环体内部，前两次输出结果也会被覆盖。为什么呢？因为这个是获取的id元素，一个id元素只能对应一个值。

另外，我将document.getElementById("demo").innerHTML=x;换成了 document.write(x);试了一下，放在循环体外除了一个是打印到相应获取的标签内一个是输出到整个网页上，其他循环输出的结果是一样的，但是如果把document.write(x);放到循环体内，那么结果就不一样了，以下是代码验证结果：