javascript - 使用 JavaScript 的动态 div

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);
}