点击按钮新增textarea报错：insertBefore参数2非Node类型

问题根源 #

触发Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 2 is not of type 'Node'错误有两个核心原因：

1. 元素获取方式错误：你用document.getElementsByTagName('weAddButton')获取按钮容器是完全错误的——getElementsByTagName是按标签名（如div、p）查找元素，而weAddButton是目标元素的id，应该用getElementById。而且getElementsByTagName返回的是HTMLCollection集合，不是单个DOM节点，不符合insertBefore对第二个参数的类型要求。
2. 插入逻辑的父元素错误：weOb是id为we的div，而weAddButton是它的兄弟元素，不是它的子元素。insertBefore方法要求第二个参数必须是调用该方法的元素的子节点，直接用weOb.insertBefore会导致逻辑失效。

修复后的完整JS代码 #

function addNewWeField() {
    let newNode = document.createElement('textarea');
    newNode.classList.add('form-control', 'weField', 'mt-2'); // 合并添加多个类，简化代码
    newNode.setAttribute("rows", 3);
    newNode.setAttribute('placeholder','Text Here');

    let weOb = document.getElementById("we");
    let weAddButtonOb = document.getElementById("weAddButton"); // 改用正确的id获取方式

    // 找到共同父元素，将新元素插入到按钮容器的前面
    weOb.parentNode.insertBefore(newNode, weAddButtonOb);
}

可选优化方向 #

如果希望把新的textarea放到we容器内部（比如原textarea的下方），可以修改插入逻辑为：

// 在we容器内，原textarea的后面插入新元素
let existingTextarea = weOb.querySelector('.weField');
weOb.insertBefore(newNode, existingTextarea.nextSibling);

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