web-dev-qa-db-fra.com

Comment ajouter plusieurs divs avec appendChild?

J'essaie de faire un échiquier en utilisant javascript et en créant 64 divs avec.
Le problème est qu'il ne crée que la première div.
Voici le 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>
javascriptappendchild
39
svtslvskl

Le problème est qu'il ne crée que le premier div.

D'accord, car vous n'avez créé qu'un div. Si vous souhaitez en créer plusieurs, vous devez appeler createElement plusieurs fois. Bouger ton

d=document.createElement("div");

ligne into la boucle j.

Si vous appelez appendChild en passant un élément qui est déjà dans le DOM, c'est déplacé, pas copié.

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";
                }
            }
        }
    }
26
T.J. Crowder

Comme l'a noté t-j-crowder, le code OP ne crée qu'une seule div. Mais, pour les googleurs, il existe un moyen d'ajouter plusieurs éléments avec un seul appendChild dans le DOM: en créant un 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
62
Renato Zannon

Bien que ce que T.J. Crowder écrit très bien, je recommanderais de le réécrire dans le code ci-dessous, en utilisant un documentFragment, comme Renato Zannon l'a suggéré. De cette façon, vous n'écrirez dans le DOM qu'une seule fois.

    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>
12
magikMaker
function crt_dv(){
dv=document.createElement('div'),document.body.appendChild(dv)
};

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

Utilisez également: for (i = 0; i <2; i ++)

1
Alexander V. Ulyanov