javascript - añadir - tooltip html bootstrap

¿Cómo agregar múltiples divs con appendChild?

Question

Estoy tratando de hacer un tablero de ajedrez usando javascript y creando 64 divs con él.
El problema es que crea solo el primer div.
Aquí está el código:

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>

Answer 1

El problema es que crea solo el primer div.

Correcto, porque solo has creado un div . Si desea crear más de uno, debe llamar a createElement más de una vez. Mueve tu

d=document.createElement("div");

línea en el bucle j .

Si llama a appendChild pasando un elemento que ya está en el DOM, se mueve , no se copia.

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

Answer 2

Aunque lo que escribe TJ Crowder funciona bien, recomendaría reescribirlo en el siguiente código, utilizando un documentFragment, como sugirió Renato Zannon. De esa manera solo escribirás en el DOM una vez.

 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>

Answer 3

Como tj-crowder ha notado, el código del OP solo crea un div. Pero, para los googlers, hay una forma de agregar múltiples elementos con un solo appendChild en el DOM: creando 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

Answer 4

function crt_dv(){
dv=document.createElement(''div''),document.body.appendChild(dv)
};
crt_dv(),dv.className=''white'';crt_dv(),dv.className=''black'';

También use: for (i = 0; i <2; i ++)