JavaScript使用cloneNode添加新元素时内容被替换如何解决

• 直接修改了原有id="name"元素的文本内容，导致原元素被覆盖
• cloneNode()生成的克隆节点未被赋值给变量，也没有插入到DOM树中，克隆操作无效
• counter定义在函数内部，每次调用都会重置为1，无法生成唯一id
• 错误修改了原有id="name"元素的id，导致后续点击无法找到目标参考元素

// 计数器提取到函数外部，避免每次调用重置
let counter = 1;
function runIt(text) { 
  // 获取原始参考节点，不对其做任何修改
  const originNode = document.getElementById("name");
  // 接收克隆出来的新节点
  const newNode = originNode.cloneNode(true);
  // 给新节点设置内容和唯一id
  newNode.innerText = text;
  newNode.id = `name-${counter}`;
  counter++;
  // 将新节点插入到原节点的后方
  originNode.after(newNode);
}
document.addEventListener("click", function(e){
    runIt("test")
}, true);

每次点击页面后，都会在原有<p id="name"></p>元素的下方新增一个内容为test的p元素，所有新元素的id会按name-1、name-2的规则自动递增不会重复，原有元素的内容和属性不会被修改。

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