javascript - 在纯JS中的firstchild div之后插入

Question

我正在使用纯 JS 在 getElementById 找到的 div 之后附加一个 HTML 字符串。这工作正常，但我现在想在找到的元素的第一个子元素之后追加。

JSFiddle

HTML

第一师我想要附加到的 Div其他分...

(第二个和第三个div没有id或class)

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);

当前结果是:

First Div Div I want to append to Other div... Text to append

我正在努力实现这一目标:

First Div Div I want to append to Text to append Other div...

我已经尝试过

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

但这不起作用

Answer 1

正如我在评论中所说，您的示例表明您要附加的 div 不是“first-div”的子级，而是“first-div”的兄弟级。它应该看起来像

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

然后可以找到父div的第一个子元素

var div2 = div1.children[0];

我摆弄了你的 fiddle :

http://jsfiddle.net/01qrmj36/