純粋JSのfirstchild divの後に挿入

Question

getElementByIdで見つかったdivの後に純粋なJSを使用してHTML文字列を追加しています。これは正しく動作していますが、見つかった要素の最初の子の後に追加したいと思います。

JSFiddle

HTML

まず本部 本部は、私が... その他のdivに追加する

（第2と第三のdiv要素には、IDやクラスを持っていません） JS

function insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
} 

var element1 = document.createElement("div"); 
element1.innerHTML = 'Text to append'; 
var div1 = document.getElementById('first-div'); 
insertAfter(div1, element1); 

現在の結果は次のとおりです。

：

まず本部 事業部は、私が... テキストは、私はこれを達成しようとしています

追加する 他のdivに追加します

最初のDiv Div追加したい 追加するテキスト その他のdiv ...

私は

var div1 = document.getElementById('first-div').firstchild; 

を試してみましたが、私は私のコメントで言ったように、これは

Answer 1

が動作していない、あなたの例が示しているあなたが追加したいdiv要素ではありません子供、しかしむしろ "第一div"の兄弟です。

http://jsfiddle.net/01qrmj36/

Answer 2

あなたがreferenceNodeとを削除する場合：それはその後、親のdivの最初の子は、私はあなたのフィドルいじっ

var div2 = div1.children[0]; 

で見つけることができる

<div id="first-child"> 
    <div>Div I want to append to</div> 
</div> 

のようになります。あなたのinsertAfterサンプルのinsertBefore呼び出しから、それはあなたがそれを望むように動作するはずです。例えば：

function insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode); 
} 

var element1 = document.createElement("div"); 
element1.innerHTML = 'Text to append'; 
var div1 = document.getElementById('first-div'); 
insertAfter(div1, element1); 

insertBeforeからreferenceNodeを省略すると、デフォルトでは、新しいノードが子ノードのリストの最後に挿入されます。詳細はhereを参照してください。