renderer2 在父節點之后追加子節點

Question

我想在父節點after附加新的子節點after但appendChild將其附加inside其中。 這是我所擁有的：

我的component.html ：

<div id="parent" (click)="appendChild()">
    parent node
</div>

我的component.ts ：

private appendChild() {
    const div = this.renderer.createElement('div');
    const text = this.renderer.createText('child node')
    this.renderer.appendChild(div, text);
    this.renderer.appendChild(document.getElementById("parent"), div)
}

這會插入在parent節點內創建的新div ，如下所示：

但是如何將它附加到parent節點之外？ 像這樣：

Answer 1

只需將其插入元素父

private appendChild() {
    const div = this.renderer.createElement('div');
    const text = this.renderer.createText('child node')
    this.renderer.appendChild(div, text);
    const parent = document.getElementById("parent")
    this.renderer.insertBefore(parent.parentElement, div, this.renderer.nextSibling(parent))
}