[SOLUCIONADO] crear elementos div

[felipeagudelo188]

hola a todos, estoy creando elementos div con java script, el codigo que manejo funciona muy bien, solo queda que al crear otro elemento este se situé en la primera posición y no debajo del elemento anterior, por favor su ayuda aquí el codigo

var randomnumber=Math.floor(Math.random()*11);

var page=document.getElementById('dv');

var divTag = document.createElement("div");

divTag.id = randomnumber;

divTag.setAttribute("align", "center");

divTag.className = "dynamicDiv";

divTag.innerHTML = response;

page.appendChild(divTag);


<div id="dv"></div>

[Alexis88]

Inserta el elemento antes del primer elemento del contenedor, utilizando el método insertBefore, mientras que para saber cuál es el primer elemento, utiliza la propiedad firstChild.

Código Javascript:

var contenedor = document.getElementById("id_contenedor"),
    primerHijo = contenedor.firstChild,
    nuevoHijo = document.createElement("div");
 
contenedor.insertBefore(nuevoHijo, primerHijo);
 

Un ejemplo:



Saludos

[felipeagudelo188]

Muchisimas graciass,, funciono perfectamente , muy buen codigo!!!!!

[caricatos]

Hola:

insertBefore puede tener el inconveniente de que no exista ese primer elemento... insertBefore no: quiero un insertAfter!...

El enlace es hacia un problema parecido... lo que quiero comentar es que genéricamente debería controlarse la existencia de nodos hijos...

Saludos

[Alexis88]

Había pensado en lo que dices, caricatos, pero como probando así no ocurría ningún problema, ni siquiera se emitían mensajes de error en consola, pues decidí dejarlo así, pero para hacerlo más 'formal', solo haría falta una condición:

Código Javascript:

if (contenedor.hasChildNodes())
    contenedor.insertBefore(nuevoHijo, contenedor.firstChild);
else
    contenedor.appendChild(nuevoHijo);
 

Saludos

[zerokilled]

buenas,
solo una observación. insertBefore se puede comportar como appendChild. de ahí que el código inicial de @alexis88 no reporta error. el estandar DOM Core Level 2 dice que si el elemento de referencia es null, entonces el elemento se agrega al final del padre. recordemos que: null es un objeto especial, y que las propiedades firstChild, lastChild, nextSibling, prevSibling pueden devolver null según sea el caso.

Iniciado por http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727

insertBefore
Inserts the node newChild before the existing child node refChild. If refChild is null, insert newChild at the end of the list of children.

en lo personal, no me preocuparía.

[Italico76]

@zerokilled: tu sabras en que casos aun es necesario comprobar con hasChildNodes() ?

[Alexis88]

Pues, cuando quieras realizar alguna instrucción con los elementos contenidos por otro y necesariamente necesites saber si dicho elemento contiene nodos hijos para realizar lo que quieres, por ejemplo:

Código Javascript:

var contenedor = document.getElementById("miContenedor");
 
if (contenedor.hasChildNodes()){
    var hijos = contenedor.childNodes;
    for (i = 0, l = hijos.length; i < l; hijos[i].innerHTML = i + 1, i++);
}
 

Pero como ya lo explicó perfectamente nuestro amigo zerokilled, para el problema de nuestro amigo felipeagudelo188 no es necesario.

Saludos

[Italico76]

@Alexis88 : es que.... en general tampoco deberia arrojar error porque el for() va de 0 a length o sea.. que sino tiene elementos se hace 0 veces la iteracion....y por tanto nunca llega a las sentencias interiores al bucle sin elementos

Digo... siempre creo es posible hacer pasar por el chequeo del bucle...y pues como el caso particular de insertBefore() y esta cubierto......

[zerokilled]

Iniciado por Italico76

@zerokilled: tu sabras en que casos aun es necesario comprobar con hasChildNodes() ?

de momento no tengo un ejemplo concreto, pero generalmente se requiere cuando quieres hacer una exploración (traversing) por los elementos, más o menos como el ejemplo de @alexis88. aunque de todas formas, para javascript se podría considerar un tanto redundante porque firstChild o lastChild podrían funcionar como boolean para determinar si existen nodos. en javascript funciona debido a la naturaleza del lenguaje, no es fuertemente tipado. por otro lado, recordemos que el DOM es un API y éste puede ser implementado en otros entornos fuera del navegador. otros lenguajes, son fuertemente tipado y en ese caso es más conveniente usar el método hasChildNodes en lugar de hacer un casting al tipo de dato correcto. pero en general, en javascript también podrias usarlo como condicional (el ejemplo de @alexis88) antes de entrar al cuerpo de un código extenso, indistintamente exista o no un bucle en el cuerpo.