在纯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会将新节点插入子节点列表的末尾，请参阅此处的更多内容。