Eliminar todos los hijos de un nodo

Un código muy simplón para eliminar todos los hijos de un nodo sin que pueda dar ningún tipo de fallo:

var container = document.getElementById('id_del_nodo');
while (container.hasChildNodes()){
container.removeChild(container.lastChild);
}

Javascript aborted (otro caso)

En otras ocasiones me ha ocurrido que al insertar una imagen creada o alterada dinámicamente, se produce una carga abortada seguida de una petición correcta. Esto se debe a que al crear un elemento imagen y asignarle una src (o, simplemente, al reasignar la src), el navegador comprueba que la imagen es la más reciente. Asímismo, al incluirla en el DOM (vía appendChild o insertBefore), se repite la petición de nuevo.

Para evitar estos inconvenientes, siempre que sea posible es aconsejable seguir una lógica similar a la siguiente:

var imgCuerpo = document.createElement('img');
imgCuerpo.style.width = '739px';
imgCuerpo.style.height = '375px';
cuerpo.insertBefore(imgCuerpo,cuerpo.childNodes[0]);
imgCuerpo.src = '/path/to/img.png';


Este problema, aparece principalmente en versiones antiguas de IExplorer (versión 6 y anteriores).

Añadiendo nodos al árbol DOM del documento

En ocasiones es necesario incluir nodos en posiciones concretas del árbol DOM. Para ello contamos con las funciones appendChild e insertBefore. Su funcionamiento es el siguiente:

• AppendChild añade un nodo como último hijo del nodo padre.
  Ejemplo: document.getElementById('contenedor').appendChild(nuevoElemento);
• InsertBefore añade un nodo como hijo del nodo padre, antes del hijo indicado. Ejemplo:
  var contenedor = document.getElementById('contenedor');
var hijo = contenedor.childNodes[0];
var nuevoElemento = document.createElement('div');
contenedor.insertBefore(nuevoElemento, hijo);