Question

所以我有一个带有一些预标签的div，就像这样：

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

现在我想使用Javascript在1和2之间放置一个新的pre节点。我一直在尝试这样做（因为我理解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);

在JS中插入兄弟节点

2 个答案: