web-dev-qa-db-ja.com

JSに兄弟ノードを挿入する

だから私はそのようにいくつかのプレタグが付いた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;
    }

これらの最後の2行は私のc ++の経験からのものですが、JSには気味が悪いです。新しい兄弟ノードを設定するにはどうすればよいですか？

javascripthtmldomsiblings
24
Chris

ここに私がそれをする方法があります：

[〜＃〜] 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/

48
Minko Gechev

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);
24
Kevin Farrugia