在 JS 中插入兄弟节点答案

【问题标题】：Insert sibling node in JS在 JS 中插入兄弟节点
【发布时间】：2012-02-05 00:20:05
【问题描述】：

所以我有一个 div 里面有一些 pre 标签，像这样：

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

现在我想使用 Javascript 在 1 和 2 之间放置一个新的 pre 节点。我一直在尝试这样做（因为我知道 DOM 是一个双向链接树），但我得到了感觉指针在我接近它时可能是不可编辑的。

（只是事件处理程序中的一个 sn-p，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 中感觉很恶心。如何设置新的兄弟节点？

【问题讨论】：

标签： javascript html dom siblings

【解决方案1】：

我会这样做：

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/

【讨论】：

可能的改进：1）使用'children'（仅元素）而不是'childNodes'（元素和文本节点）； 2) 在'if'中检查容器的孩子：容器可以为空； 3) 使用原生 HTMLElement 'contentEditable' 属性而不是 setAttribute； 4) 如果您不需要将值解析为 HTML（如本例所示），请使用 'textContent' 而不是 'innerHTML'； 5) 使用更简单的 DOM 附加方法 'after' 和 'before'（除了 IE11 之外的大多数浏览器都支持它们）。

【解决方案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);

【讨论】：

我编程多年，第一次听说insertAdjacentElement，绝对厉害！谢谢！