在 javascript 循环中添加多个 HTML 元素答案

【问题标题】：Adding multiple HTML elements in a javascript loop在 javascript 循环中添加多个 HTML 元素
【发布时间】：2016-06-14 21:41:23
【问题描述】：

我正在尝试通过 javascript 中的循环在页面中添加多个元素，但代码未运行，请有人指出问题所在

<body>
<script type="text/javascript">
function gengrid()
      {
          var i=0;
          var num_stud=8;
          var newdiv;
          var divIdName;
          for(i=1;i<=num_stud;i++)
          {
             newdiv = document.createElement('div');
             divIdName = '50'+i;
             newdiv.setAttribute('id',divIdName);
             newdiv.innerHTML ='<img src=50'+i+'.jpg alt="a"></img>';
             document.body.appendChild(newdiv);
          }
      }
  </script>

【问题讨论】：

定义“不运行”？您收到错误消息吗？还是它的行为方式不符合您的预期？你能把你的代码放在一个小提琴里吗？
你在别处调用函数gengrid()吗？
jsfiddle.net
id 不允许以数字开头。谢谢可能是导致您的问题的原因，但即使不是，您也需要改变它。
您还忘记正确引用 img 标签的 src 属性的值。此外，img 标签应该是自动关闭的，即<img src="whatever.jpg" alt="a" />。

标签： javascript html

【解决方案1】：

您已经定义了一个名为gengrid 的函数，但没有运行它。在函数的定义下面，试试把gengrid();.

【讨论】：

【解决方案2】：

我已经测试了以下代码并且它可以工作。

here is a Plunker link

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM Manipulation</title>
</head>
<body>
<script type="text/javascript">
    function gengrid()
    {
        var i=0;
        var num_stud=8;
        var newdiv;
        var divIdName;
        for(i=1;i<=num_stud;i++)
        {
            newdiv = document.createElement('div');
            divIdName = '50'+i;
            newdiv.setAttribute('id',divIdName);
            newdiv.innerHTML ='<div id="box'+i+'">Testing 123</div>';
            document.body.appendChild(newdiv);
        }
    }
    window.onload = function () {
        gengrid();
    }
</script>


</body>
</html>

希望这会有所帮助！

【讨论】：