Javascript TypeError:无法执行'；追加儿童'；在'；节点'；：参数1的类型不是'；节点'；

我想附加一个现有的div，使其具有特定的设计以及从数组中提取的错误消息

这是我的尝试：

    if (data.errors.firstName) {
        document.getElementById("firstName").classList.add("has-error");
        document.getElementById("firstName-group").appendChild('<div class="help-block"> </div>');
    }

经过研究，这意味着我可以添加一个字符串，因为它不是有效的dom节点

---

如何正确执行此操作？

您不能将字符串值传递给

appendChild

，它必须是一个

节点，您可以使用
document.createElement
创建该节点，如下所示：


document.getElementById（“firstName”）.classList.add（“有错误”）；
让helpBlock=document.createElement（'div'）；
helpBlock.classList.add（'help-block'）；
document.getElementById（“名字组”）.appendChild（帮助块）
。有错误{
边框：1px纯红；
}
.帮助阻止{
边框：1px纯绿色；
}
.help块：：之后{
内容：“我是帮助块”；
}

名字
函数返回的是字符串而不是div节点。appendChild只能附加节点

var d= document.createElement("div");
d.classList.add("help-block");
document.getElementById("firstName-    group").appendChild(d);

正如错误报告所述，
parentNode.appendChild（）
需要一个DomNode作为其参数；但是，如果必须传递HTML字符串，则可以使用
parentNode.append（）
：

if（data.errors.firstName）{
document.getElementById（“firstName”）.classList.add（“有错误”）；
document.getElementById（“名字组”）.append（“”）；
}

但是请注意，MDN认为这是“实验性的”，请参阅下面的链接参考，因此在使用前检查兼容性

参考资料：



可能的副本
var d= document.createElement("div");
d.classList.add("help-block");
document.getElementById("firstName-    group").appendChild(d);

if (data.errors.firstName) {
    document.getElementById("firstName").classList.add("has-error");
    document.getElementById("firstName-group").append('<div class="help-block"> </div>');
}