Javascript 在JS中插入同级节点

我有一个div，里面有一些pre标签，如下所示：

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

---

<>最后两行是我的C++经验，但在JS中感觉很差。如何设置新的同级节点？

以下是如何设置的：

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

---

jsidle:

您还可以使用或插入新的同级；这两个选项都有

beforebeagin

、

beforebeand

、

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，它绝对很棒！非常感谢。可能的改进：1）使用“子节点”（仅元素）而不是“子节点”（元素和文本节点）；2） 在“if”中检查容器的子级：容器可以为null；3） 使用本机HtmleElement“contentEditable”属性而不是setAttribute；4） 如果不需要将值解析为HTML（如本例所示），请使用“textContent”而不是“innerHTML”；5） 使用更简单的DOM附加方法“after”和“before”（除IE11之外的大多数浏览器都支持它们）。

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