Question

的JavaScript

var i = 0;

function creatediv() {
    i++;

    var newelement = document.createElement('div');
    newelement.setAttribute('id', i);

    newelement.style.color = 'FFCC66';
    newelement.style.background = 'FFCC66';
    newelement.style.width = '500px';
    newelement.style.height = '100px';

    var parentelement = document.getElementById('presentdiv');
    parentelement.appendChild(newelement);
    var lastchild = parentelement.lastChild;
    parentelement.insertBefore(lastchild, parentelement);
}

HTML

<div id="presentdiv">
    <script>
        for (var i = 0; i <= 10; i++) {

            creatediv(i);

        }
    </script>
</div>

我想使用JavaScript创建多个动态div。我使用for循环和creatediv()函数，但在此代码中，当我运行完整代码时，只动态创建一个div。

Answer 1

//var i = 0; No need

function creatediv(i) { //Add i as a parameter
    //i++; No need

    var newelement = document.createElement('div');
    newelement.setAttribute('id', i);

    newelement.style.color = '#FFCC66'; // # is required to show color
    newelement.style.background = '#FFCC66'; // # is required to show color
    newelement.style.width = '500px';
    newelement.style.height = '100px';

    var parentelement = document.getElementById('presentdiv');
    parentelement.appendChild(newelement);

//What is the purpose of lines below?
    //var lastchild = parentelement.lastChild;  
    //parentelement.insertBefore(lastchild, parentelement);
}

Answer 2

你的代码中有一些错误。首先，您发送creatediv(i);并且未在函数function creatediv() { }

中声明'i'

你在迭代器中增加i，但迭代器也在增加for (var i = 0; i <= 10; i++) {

当您修复错误时，我会尝试为您准备一段代码

Answer 3

<html>
    <head>
        <script>
            function create()
            {
                var ar = [], i;

                for( i=0; i<10; i++ )
                {
                    ar[i] = function()
                    {
                        var newElem = document.createElement('div');
                        newElem.setAttribute('id', i);

                        newElem.style.color = 'FFCC66';
                        newElem.style.background = 'FFCC66';
                        newElem.style.width = '500px';
                        newElem.style.height = '100px';

                        var parent = document.getElementById('presentdiv');
                        parent.appendChild(newElem);
                    };
                }

                return ar;
            }
        </script>
    </head>

    <body>
        <div id="presentdiv">
            <script>
                var a = create();

                for( var i=0; i<3; i++ )
                {
                    a[i]();
                }
            </script>
        </div>

        <script>

        </script>
    </body>
</html>

Answer 4

首先，我建议使用jQuery或类似的东西进行DOM操作，这样可以避免浏览器兼容性问题。

其次，你有范围和理解的问题你的函数没有使用你在循环中给出的参数你试着增加两倍的迭代器您尝试增加不使用相同范围的函数内的迭代器（因此它不知道您在循环中定义的i。）
您创建了一个全局变量i <script></script>标记不应位于html的中间。 <head></head>或<body></body>标记的开头（或结尾）是更好的主意。

更正的代码（没有jQuery）将是：

function creatediv(a) {
    var newelement = document.createElement('div');
    newelement.setAttribute('id', a);

    newelement.style.color = 'FFCC66';
    newelement.style.background = 'FFCC66';
    newelement.style.width = '500px';
    newelement.style.height = '100px';

    var parentelement = document.getElementById('presentdiv');
    parentelement.appendChild(newelement);
}

function runloop() {
    for (var i = 0; i <= 10; i++) {
        creatediv(i);
    }
}

<强> HTML

<body onload="runloop()">
     <div id="presentdiv"></div>
</body>

最后，在开始DOM操作之前，您应确保DOM已准备就绪。 jQuery也会帮助你。

我希望这会有所帮助。

修改您可以使用此http://jsfiddle.net/LknaZ/4/

<强> EDIT2 现在这段代码确保DOM准备就绪

动态div使用JavaScript

4 个答案: