[英]Insert sibling node in JS
So I have a div with some pre tags in it, like so: 所以我有一个带有一些预标签的div,如下所示:
<div id="editor" >
<pre contentEditable="true">1</pre>
<pre contentEditable="true">2</pre>
<pre contentEditable="true">3</pre>
</div>
Now I want to use Javascript to put a new pre
node between 1 and 2. I've been trying to do it this way (since I understand the DOM is a doubly linked tree), but I'm getting the sense that maybe the pointers aren't editable as I'm approaching it. 现在我想使用JavaScript来换上新的
pre
1和2。我一直在试图做这种方式(因为我明白DOM是一个双链接树)之间的节点,但我发现这个意义上,也许当我接近它时,指针是不可编辑的。
(just a snippet inside an event handler, e
being the event) (只是事件处理程序中的一个片段,
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;
}
Those last two lines are from my c++ experience, but feel icky in JS. 最后两行来自我的c ++经验,但在JS中感觉很吵。 How would I set a new sibling node?
我该如何设置一个新的兄弟节点?
Here is how I would do that: 我将如何做到这一点:
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);
}
jsfiddle: http://jsfiddle.net/bZGEZ/ jsfiddle: http : //jsfiddle.net/bZGEZ/
You could also insert a new sibling using insertAdjacentElement or insertAdjacentHTML ; 您还可以使用insertAdjacentElement或insertAdjacentHTML插入新的兄弟; both of which take the options
beforebegin
, beforeend
, afterbegin
and afterend
. 两者都采用
beforebegin
, beforeend
, afterbegin
和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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.