Angular中如何使用Renderer2在指定元素后插入HTML元素？

你遇到的问题其实很典型——首先得明确：Angular的Renderer2并没有提供直接的appendAfter方法，这就是你一开始尝试这个方法没生效的原因。而你用renderer.appendChild(original, this.cloned)会把克隆元素插到原Input内部，是因为appendChild的作用是把元素作为子节点添加到目标元素里，Input本身是自闭合标签，所以看起来就像是“插在内部”了。

要实现“在原元素之后插入”的效果，我们可以借助Renderer2的insertBefore方法来模拟，具体步骤如下：

正确的实现方式 #

首先，注意不要在constructor里操作DOM——此时组件的元素还没挂载到页面上，最好在ngAfterViewInit生命周期钩子中执行DOM操作，确保元素已经存在于DOM树中：

import { Component, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: `<input type="text" placeholder="原输入框">`
})
export class YourComponent implements AfterViewInit {
  private cloned: HTMLInputElement | undefined;

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { }

  ngAfterViewInit(): void {
    // 1. 获取原Input元素
    const original = this.elementRef.nativeElement as HTMLInputElement;
    // 2. 克隆元素（true表示深克隆）
    this.cloned = original.cloneNode(true) as HTMLInputElement;
    // 3. 隐藏原元素
    original.style.display = 'none';
    // 4. 获取原元素的父节点
    const parent = original.parentNode;
    
    // 5. 用insertBefore在原元素之后插入克隆元素
    if (parent) {
      // insertBefore的第三个参数是参考节点：把克隆元素插到参考节点之前
      // 这里用original.nextSibling，不管原元素有没有下一个兄弟，都会插到原元素后面
      this.renderer.insertBefore(parent, this.cloned, original.nextSibling);
    }
  }
}

原理说明 #

Renderer2.insertBefore(parent, newElement, referenceElement)的作用是：

• 将newElement插入到parent的子节点列表中，且位于referenceElement之前
• 如果referenceElement是null，则newElement会被插入到parent的子节点末尾

所以当我们传入original.nextSibling作为参考节点时：

• 如果原元素后面有其他兄弟节点，克隆元素会插到原元素和它的下一个兄弟之间
• 如果原元素是父节点的最后一个子节点，original.nextSibling就是null，此时克隆元素会被插到父节点的末尾，正好在原元素之后

这样就能完美实现你想要的“在原元素之后插入克隆元素”的效果啦。

内容的提问来源于stack exchange，提问作者user15361861