Вставьте родственный узел в JS

Question

Так у меня есть DIV с некоторыми предварительно тегов в нем, например, так:

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

Теперь я хочу использовать Javascript, чтобы поставить новый pre узел между 1 и 2. Я (так как я понимаю, что DOM является дважды связанным деревом), но я понимаю, что, возможно, указатели не редактируются, поскольку я приближаюсь к нему.

(только сниппет внутри обработчика событий, e быть событие)

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

Эти две последние строки из моего C++ опыт, но чувствовать себя неприглядное в JS. Как я могу установить новый узел?

Answer 1

Вот как я бы это сделать:

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

Вы также можете вставить новый родственный с помощью insertAdjacentElement или insertAdjacentHTML; оба из которых принимают варианты beforebegin, beforeend, afterbegin и afterend.

Пример:

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