javascript - 为什么 document.getElementById 在这里返回 null？

Question

为什么下面这段代码不起作用？我正在尝试编写一个应用程序，它将根据用户输入生成一定数量的 div。当我进入此应用程序的控制台并输入以下行时:var i = document.getElementById("foo"); 它返回 null。

<div>
    <input type="number" id="foo" value="3"/>
</div>

<div>
    <script>
        var i = document.getElementById("foo");
        for (var num = 1; num <= i; num++) {
            document.write('<div id="' + i + '"> ... </div>');
        }
    </script>
</div>

Answer 1

阅读问题下的评论!

此外，创建适当的元素通常是一件好事。

<div>
    <input type="number" id="foo" value="3"/>
</div>

<div>
    <script>
        var i = document.getElementById("foo").value;
        for (var num = 1; num <= i; num++) {
            var elem = document.createElement('div');
            elem.id  = 'elem' + num;
            elem.innerHTML = ' ... ';
            document.body.appendChild(elem)
        }
    </script>
</div>

FIDDLE