Chèn anh chị em nút trong JS

Question

Vì vậy, tôi có một div với một số thẻ trước trong nó, như vậy:

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

Bây giờ tôi muốn sử dụng Javascript để đặt một pre nút mới giữa 1 và 2. Tôi đã đã cố gắng làm theo cách này (vì tôi hiểu DOM là cây được liên kết đôi), nhưng tôi hiểu được rằng có thể con trỏ không thể chỉnh sửa được khi tôi tiếp cận nó.

(chỉ là một đoạn mã bên trong một event handler, e là sự kiện)

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

Hai dòng cuối cùng là từ c của tôi ++ kinh nghiệm, nhưng cảm thấy icky trong JS. Làm thế nào tôi có thể thiết lập một nút anh chị em mới?

Answer 1

Dưới đây là làm thế nào tôi sẽ làm điều đó:

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

Bạn cũng có thể chèn một anh chị em mới sử dụng insertAdjacentElement hoặc insertAdjacentHTML; cả hai tùy chọn này đều có các tùy chọn beforebegin, beforeend, afterbegin và afterend.

Ví dụ:

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