Insertar nodo del mismo nivel en JS

Question

así que tengo un div con algunas etiquetas pre en el mismo, así:

<div id="editor" > 
    <pre contentEditable="true">1</pre> 
    <pre contentEditable="true">2</pre> 
    <pre contentEditable="true">3</pre> 
</div> 

Ahora quiero usar Javascript para poner un nuevo nodo pre entre 1 y 2. He He intentado hacerlo de esta forma (ya que entiendo que el DOM es un árbol doblemente vinculado), pero tengo la sensación de que tal vez los punteros no son editables ya que me estoy acercando.

(sólo un fragmento dentro de un controlador de eventos, e ser el caso)

var tag = e.srcElement; 
    if(tag.nextSibling){ 
     var next = tag.nextSibling; 
     var newPre = document.createElement('pre'); 
     newPre.setAttribute("contentEditable", "true"); 
     newPre.innerHTML = "boom"; 
     tag.nextSibling = newPre; 
     newPre.nextSibling = next; 
    } 

Estas dos últimas líneas son de mi experiencia en C++, pero se sienten repulsivo en JS. ¿Cómo establecería un nuevo nodo hermano?

Answer 1

Aquí es cómo lo haría:

JS

var container = document.getElementById('editor'), 
    firstChild = container.childNodes[1]; 
if (container && firstChild) { 
    var newPre = document.createElement('pre'); 
    newPre.setAttribute("contentEditable", "true"); 
    newPre.innerHTML = "boom"; 
    firstChild.parentNode.insertBefore(newPre, firstChild.nextSibling);  
} 

jsFiddle: http://jsfiddle.net/bZGEZ/

Answer 2

También puede insertar un nuevo hermano o usando insertAdjacentElementinsertAdjacentHTML; ambos toman las opciones beforebegin, beforeend, afterbegin y afterend.

Ejemplo:

var container = document.getElementById('editor'), 
firstChild = container.childNodes[1]; 

var newPre = document.createElement('pre'); 
newPre.setAttribute("contentEditable", "true"); 
newPre.innerHTML = "boom"; 
firstChild.insertAdjacentElement("afterend", newPre);