Question

我想附加一个现有的div以进行特殊设计，并从数组中提取错误消息。

这是我的尝试

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

但是它导致了错误：

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

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

如何正确执行此操作？

Answer 1

您不能将字符串值传递给appendChild，它必须是Node，您可以使用document.createElement创建它，如下所示：

document.getElementById("firstName").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
document.getElementById("firstName-group").appendChild(helpBlock);

.has-error {
  border: 1px solid red;
}

.help-block {
  border: 1px solid green;
}

.help-block::after {
  content: 'i am the help block';
}

<div id="firstName-group">
  <div id="firstName">first name</div>
</div>

Answer 2

您的函数返回的是字符串而不是div节点。 appendChild只能追加一个节点

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

Answer 3

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

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

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

参考文献：

parentNode.append()。

TypeError：无法在“节点”上执行“ appendChild”：参数1不是“节点”类型

3 个答案: