Question

我试图通过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>

Answer 1

您已定义了一个名为gengrid但未运行它的函数。在函数定义下方，尝试放gengrid();。

Answer 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>

希望这有帮助！

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

2 个答案: