Entrar

duda sobre el metodo appendChild

isaacaaron · · Solicitar retirada
Alguien podría arrojar un poco de luz y algún ejemplo sobre lo que dice a continuación el método appendChild y que por más que leo no lo entiendo.

appendChild agrega un nuevo nodo al final de la lista de un elemento hijo de un elemento padre especificado. Si el nodo ya existe, es eliminado del actual nodo padre, para posteriormente ser agregado al nuevo nodo padre.

Que quieres decir al decir:

“Si el nodo ya existe, es eliminado del actual nodo padre, para posteriormente ser agregado al nuevo nodo padre.”

En el enlace a continuación de mozilla se habla más sobre el tema, pero sigo con las mismas dudas.

https://developer.mozilla.org/es/docs/Web/API/Node/appendChild
skaparate · · Solicitar retirada
Hola!

La documentación en español es poco clara y, en este caso, mal interpretada. Lo que dice es:

Si el hijo es una referencia hacia un nodo existente en el documento actual, este es quitado del padre actual para ser puesto en el nodo padre nuevo (en la documentación habla de posiciones).

Es algo así:

Documento Original
<div id="padre">
  <div id="nodo1">
  </div>
</div>
<div id="nuevoPadre"></div>

Imagina que ejecutas lo siguiente con Javascript:

var nodo1 = document.getElementById('#node1');
var nuevoPadre = document.getElementById('#nuevoPadre');
nuevoPadre.appendChild(nodo1);

Documento Modificado
<div id="padre">
</div>
<div id="nuevoPadre">
  <div id="nodo1">
  </div>
</div>

La clave está en Si el nodo actual es una referencia a un nodo existente.
isaacaaron · · Solicitar retirada
Hola gracias por contestar. Dos cosas, en el ejemplo que pusiste te confundiste y pusiste el nombre de los id con la almohadilla (#) eso es jquery. Al margen de eso veo que tienes razón en que la traducción española está mal interpretada y ahora si lo entiendo mas o menos, así y todo me surge una duda.
En el ejemplo que te pongo a continuación porque no surge lo mismo es decir, porque no elimina el nodo <div id="nodo1"> que es hijo de <div id="padre"> y que coincide con el div que se creó dinámicamente (var div = document.createElement("div")). Pon a andar el ejemplo y veras que crea el div y lo pone como hijo de <div id="nuevoPadre"> pero NO ELIMINA EL OTRO, el <div id="nodo1">. Seguramente será algo que me falta por comprender, si puedes echarme una mano.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="application/javascript">
window.onload = function() {
var div = document.createElement("div");
var nuevoPadre = document.getElementById('nuevoPadre');
nuevoPadre.appendChild(div);

}
</script>
<style type="text/css">
</style>
</head>

<body>
<div id="padre">
<div id="nodo1">
</div>
</div>
<div id="nuevoPadre"></div>
</body>
</html>
skaparate · · Solicitar retirada
Jejeje, si, me equivoqué... la costumbre de jQuery.

La diferencia con tu ejemplo es que el div que creas (con create element) no tiene el mismo id, por lo tanto no es una referencia a un elemento existente y en consecuencia no es removido del padre anterior.
isaacaaron · · Solicitar retirada
Corrígeme si me equivoco. Como bien dices no es una referencia a un elemento existente, porque lo que yo he hecho, es crear un tipo de elemento en este caso un div también, pero no he hecho referencia a ese <div id="nodo1"> es decir, (child) no está haciendo referencia a ese <div id="nodo1">. ¿?
skaparate · · Solicitar retirada
Claro, eso es. Aunque hay un caso donde no sé qué ocurre, donde creas un elemento con un id que ya existe, aunque supongo que debería generar un error.
isaacaaron · · Solicitar retirada
porque deberia generar un error? incluso he pensado en vez de id igual con .class igual
isaacaaron · · Solicitar retirada
Eso mismo estaba pensando, no sé qué podría pasar, porque en verdad no estas haciendo referencia a un nodo existente ¿o sí?, Lo que has hecho con createElement si también tuviera un id igual, sería que lo has creado no has hecho referencia a él.
Bueno estas haciendo referencia a el porque tiene un id igual(al margen de que no pueden haber dos elementos con id iguales), pero en verdad son elementos diferentes, ya que en verdad se esta haciendo referencia al elemento que se ha creado no al que esta en el documento.No sé qué pensar.
isaacaaron · · Solicitar retirada
Ya resolví el misterio, esto es lo que pasaría, pruébalo y veras que pasa.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script type="application/javascript">
window.onload = function() {
var div = document.createElement("div");
div.setAttribute("id", "nodo1");
var nuevoPadre = document.getElementById('nuevoPadre');
nuevoPadre.appendChild(div);

}
</script>
<style type="text/css">
</style>
</head>

<body>
<div id="padre">
<div id="nodo1">
</div>
</div>
<div id="nuevoPadre"></div>
</body>
</html>

Los trata como elementos diferentes como me suponia es decir, no es una referencia a un elemento existente en el documento en este caso, y los trata independientes.
skaparate · · Solicitar retirada
Según la W3C, el atributo id debe ser único (de hecho, si validas un documento HTML5 con un ID duplicado, este te debería advertir del error), por lo tanto debería ser un error crear un elemento con un id existente. Si existen 2 elementos con un mismo ID e intentas encontrarlo con Javascript, ¿a cuál de los dos te refieres? Obviamente podrías encontrar un ID haciendo referencia a los padres, pero si este es el caso, entonces mejor nunca usar un ID y usar clases.
isaacaaron · · Solicitar retirada
skaparate escribió:Claro, eso es. Aunque hay un caso donde no sé qué ocurre, donde creas un elemento con un id que ya existe, aunque supongo que debería generar un error.

Bueno por lo menos ya sabemos que no da ningún error. Pero este asunto es para tener en cuenta porque en el ejemplo que te puse si hubiera una clase en vez de un id y esta clase fuera igual al existente pasaría lo mismo, no lo eliminaría y los trataría diferente. Y uno puede esperar que trate a los nodos iguales, cuando no lo son y al ejemplo me remito. (Child) aquí no está haciendo referencia a un nodo existente en el documento <div class="nodo1"> sino, al creado con createElement("div");


var div = document.createElement("div");
div.setAttribute("id", "nodo1");
var nuevoPadre = document.getElementById('nuevoPadre');
nuevoPadre.appendChild(div);


<div id="padre">
<div class="nodo1">
</div>
</div>
<div id="nuevoPadre"></div>