Insert sibling node in JS

Question

So I have a div with some pre tags in it, like so:

    
1
    


        
                      

              相关标签:
       
      

Answer 1

Here is how I would do that:

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

You could also insert a new sibling using insertAdjacentElement or insertAdjacentHTML; both of which take the options beforebegin, beforeend, afterbegin and afterend.

Example:

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