在纯 JS 中的 firstchild div 之后插入

Question

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

HTML

首先 Div Div 我想附加到其他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 不是 child，而是 "first-div" 的同级。它应该看起来像

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

然后parentdiv的第一个child可以用

找到

var div2 = div1.children[0];

我fiddle和你一起fiddle:

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 默认为在子节点列表的末尾插入新节点，查看更多 here。

在纯 JS 中的 firstchild div 之后插入

Insert after firstchild div in pure JS

javascript

dom

getelementbyid