在純JavaScript的firstchild div之后插入

Question

我正在使用純JS在getElementById找到的div之后追加HTML字符串。 這可以正常工作，但是我現在想在found元素的第一個孩子之后追加。

的jsfiddle

HTML

我要附加到其他分部的第一分部...

（第二個和第三個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 ...

我努力了

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

但這不起作用

Answer 1

正如我在評論中所說，您的示例表明您要附加的div不是孩子，而是“ first-div”的兄弟姐妹。 它看起來像

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

然后可以找到父div的第一個孩子

var div2 = div1.children[0];

我擺弄着你的小提琴：

http://jsfiddle.net/01qrmj36/

Answer 2

如果您從insertAfter示例中的insertBefore調用中刪除referenceNode，則它應按照您希望的方式運行，例如：

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會將新節點插入子節點列表的末尾，請參閱此處的更多內容。