Вставить родной брат node в JS

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

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

Теперь я хочу использовать Javascript, чтобы поместить новый pre node между 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;
    }

Те последние две строки относятся к моему опыту на С++, но чувствую себя нехорошо в JS. Как установить новый брат node?

Ответ 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/

Ответ 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);