Inserire nodo di pari livello in JS

Question

Così ho un div con alcuni tag pre in esso, in questo modo:

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

Ora voglio utilizzare Javascript per mettere un nuovo pre nodo fra 1 e 2. Ho ho cercato di farlo in questo modo (dal momento che capisco che il DOM è un albero doppiamente collegato), ma ho la sensazione che forse i puntatori non sono modificabili mentre mi sto avvicinando.

(solo un frammento all'interno di un gestore di eventi, e essendo l'evento)

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

Quelle ultime due righe sono dalla mia esperienza C++, ma si sentono icky in JS. Come impostare un nuovo nodo fratello?

Answer 1

ecco come lo farei:

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

si potrebbe anche inserire un nuovo fratello utilizzando insertAdjacentElement o insertAdjacentHTML; entrambi accettano le opzioni beforebegin, beforeend, afterbegin e afterend.

Esempio:

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);