javascript - 防止 javascript 无休止地附加 dom

Question

我有一个 javascript，它根据它为每个字段接收到的 JSON 响应来调整 dom。一个例子是：

    if (data.errors.firstName) {
        document.getElementById("firstName-group").classList.add("has-error");
        let helpBlock = document.createElement('div');
        helpBlock.classList.add('help-block');
        helpBlock.innerHTML = data.errors.firstName;
        document.getElementById("firstName-group").append(helpBlock);
    }

这里的问题是，这将导致 dom 像这样重复附加：

图片

那么在附加dom时如何避免这个问题呢？这应该清除任何附加的消息吗？或者如何做到这一点？

标签： javascriptdom

Answer 1

您可以检查 #firstName-group 元素下是否已经有 .help-block div，如果没有，则仅追加。

这是一个例子：

if (data.errors.firstName && !document.querySelector('#firstName-group .help-block')) {
    document.getElementById("firstName-group").classList.add("has-error");
    let helpBlock = document.createElement('div');
    helpBlock.classList.add('help-block');
    helpBlock.innerHTML = data.errors.firstName;
    document.getElementById("firstName-group").append(helpBlock);
}