46

私はjavascriptを使用してチェス盤を作成し、それを使用して64個のdivを作成しようとしています。
問題は、最初のdivのみが作成されることです。
コードは次のとおりです。

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

4 に答える 4

78

tj-crowderが指摘しているように、OPのコードは1つのdivのみを作成します。ただし、Google社員の場合、DOMで複数の要素に1つの要素を追加する方法が1つあります。それappendChildは、を作成することdocumentFragmentです。

function createDiv(text) {
  var div = document.createElement("div");
  div.appendChild(document.createTextNode(text));
  return div;
}

var divs = [
  createDiv("foo"),
  createDiv("bar"),
  createDiv("baz")
];

var docFrag = document.createDocumentFragment();
for(var i = 0; i < divs.length; i++) {
  docFrag.appendChild(divs[i]); // Note that this does NOT go to the DOM
}

document.body.appendChild(docFrag); // Appends all divs at once
于 2013-02-16T12:29:28.707 に答える
33

問題は、最初のdivのみが作成されることです。

そうです、作成したのは1つだけだからですdiv。複数作成する場合は、createElement複数回呼び出す必要があります。あなたの

d=document.createElement("div");

ループに入る。j

appendChildすでにDOMにある要素の受け渡しを呼び出すと、コピーではなく移動されます。

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";
                }
            }
        }
    }
于 2013-02-16T12:19:37.460 に答える
12

TJ Crowderが書いたものは問題なく動作しますが、Renato Zannonが提案したように、documentFragmentを使用して、以下のコードに書き直すことをお勧めします。そうすれば、DOMへの書き込みは1回だけになります。

    window.onload = function() {
        var count = 5,
            div,
            board = document.getElementById('board'),
            fragment = document.createDocumentFragment();
        
        // rows
        for (var i = 0; i < count; ++i) { 

            // columns
            for (var j = 0; j < count; ++j) { 
                div = document.createElement('div');
                div.className = (i % 2 != 0 && j % 2 == 0) || (i % 2 == 0 && j % 2 != 0) ? 'black' : 'white';
                fragment.appendChild(div);
            }
        }
        
        board.appendChild(fragment);
    };
#board {
  background-color: #ccc;
  height: 510px;
  padding: 1px;
  width: 510px;
}

.black,
.white {
    float: left;
    height: 100px;
    margin: 1px;
    width: 100px;
}

.black {
  background-color: #333;
}

.white {
  background-color: #efefef;
}
<div id="board"></div>

于 2013-11-03T22:45:27.390 に答える
1 
function crt_dv(){
dv=document.createElement('div'),document.body.appendChild(dv)
};

crt_dv(),dv.className='white';crt_dv(),dv.className='black';

また、次を使用します：for（i = 0; i <2; i ++）

于 2016-04-29T11:22:30.580 に答える