Question

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

HTML

第一部 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);

目前的结果是：

第一部 Div我想补充一下其他div ... 要追加的文字

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

第一部 Div我想补充一下要追加的文字其他div ...

我试过了

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

但这不起作用

Answer 1

正如我在评论中所说，你的例子表明你想要追加的div不是孩子，而是＆＃34; first-div＆＃34;的兄弟姐妹。它应该看起来像

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

在纯JS中插入firstchild div之后

2 个答案: