Блог

Я хочу добавить новый дочерний узел 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)
}
  

Это вставляет новое div , которое было создано внутри parent узла следующим образом:

но как мне добавить его за пределы parent узла? Вот так:

просто вставьте его в родительские элементы

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