如何使用appendChild添加多个div? [英] How to add multiple divs with appendChild?

问题描述

我正在尝试使用javascript制作棋盘，并使用它创建64个div.
问题是，它仅创建了第一个div.
这是代码:

I am trying to make a chessboard using javascript and creating 64 divs with it.
The problem is, that it creates only the first div.
Here is the code:

div {
    width: 50px;
    height: 50px;

    display: block;
    position: relative;
    float: left;
}

<script type="text/javascript">
    window.onload=function()
    {
        var i=0;
        var j=0;
        var d=document.createElement("div");

        for (i=1; i<=8; i++)
        {
            for (j=1; j<=8; j++)
            {
                if ((i%2!=0 && j%2==0)||(i%2==0 && j%2!=0))
                {
                    document.body.appendChild(d);
                    d.className="black";
                }
                else
                {
                    document.body.appendChild(d);
                    d.className="white";
                }
            }
        }
    }
</script>

推荐答案

问题是，它仅创建了第一个div.

The problem is, that it creates only the first div.

对，因为您只创建了一个 div .如果要创建多个，则必须多次调用 createElement .移动您的

Right, because you've only created one div. If you want to create more than one, you must call createElement more than once. Move your

d=document.createElement("div");

将插入到 j 循环中.

如果您调用 appendChild 并传入了DOM中已存在的元素，则该元素将被移动，而不是被复制.

If you call appendChild passing in an element that's already in the DOM, it's moved, not copied.

window.onload=function()
    {
        var i=0;
        var j=0;

        for (i=1; i<=8; i++)
        {
            for (j=1; j<=8; j++)
            {
                if ((i%2!=0 && j%2==0)||(i%2==0 && j%2!=0))
                {
                    var d=document.createElement("div");
                    document.body.appendChild(d);
                    d.className="black";
                }
                else
                {
                    var d=document.createElement("div");
                    document.body.appendChild(d);
                    d.className="white";
                }
            }
        }
    }

这篇关于如何使用appendChild添加多个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！