javascript - 如何使用 javascript 循环在特定的 div 中显示 * 模式

Question

当前代码在文档中显示 * 模式，但我希望它显示在特定的 div 中。我有一个带有#result 的div。我想在 #result div 中显示模式。

<script>
  var maxs = 1;

  for(var i=1;i<=5;i++){
    for(var x=1;x<=maxs;x++){
      document.write("*");
    }
    document.write("<br>");
   maxs++
  }

  </script>

Answer 1

Use innerHTML property to set the HTML and select the element using getElementById

+= 会将新的 HTML 与现有的 HTML 合并，并将用合并后的 html

替换元素的 inner-html

var maxs = 1;
for (var i = 1; i <= 5; i++) {
  for (var x = 1; x <= maxs; x++) {
    document.getElementById('result').innerHTML += "*";
  }
  document.getElementById('result').innerHTML += "<br>";
  maxs++
}

<div id='result'></div>

或者只在循环后缓存 html 和 .innerHTML 一次，这将只更新一次 DOM

var maxs = 1;
var html = '';
for (var i = 1; i <= 5; i++) {
  for (var x = 1; x <= maxs; x++) {
    html += "*";
  }
  html += "<br>";
  maxs++
}
document.getElementById('result').innerHTML = html;

<div id='result'></div>