javascript - parentnode - Insertar nodo hermano en JS

parentnode javascript

Question

Así que tengo un div con algunas etiquetas pre en él, 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 estado tratando de hacerlo de esta manera (ya que entiendo que el DOM es un árbol doblemente vinculado), pero tengo la sensación de que tal vez el Los punteros no son editables cuando me estoy acercando.

(solo un fragmento dentro de un controlador de eventos, siendo el 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;
    }

Esas dos últimas líneas son de mi experiencia en c ++, pero me siento mal en JS. ¿Cómo puedo configurar un nuevo nodo hermano?

Answer 1

Así es como yo haría eso:

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 utilizando insertAdjacentElement o insertAdjacentHTML ; los cuales toman las opciones beforebegin que beforebegin , beforeend 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);