表单验证场景下如何让appendChild仅执行一次？

问题根因：当前代码每次触发表单校验不通过逻辑时，都会新创建一个p元素插入到页面中，没有做去重或清空处理，因此每次点击提交按钮都会新增一条相同的错误提示。

以下是两种常用的修复方案： #

方案1：插入前清空错误容器 #

每次插入错误提示前，先清空承载提示的#new容器内的原有内容，再插入新提示，实现简单易维护。

if(input_name.value == "" || input_email.value == "" || input_password.value == "")
{
    var element = document.getElementById("new");
    // 清空容器内原有内容
    element.innerHTML = '';

    var tag = document.createElement("p");
    var text = document.createTextNode("所有输入项均为必填");
    tag.appendChild(text);
    element.appendChild(tag);
}

方案2：判断提示是否存在后再插入 #

给错误提示添加专属标识，插入前先判断页面中是否已存在该提示，不存在才执行插入逻辑，性能更优，还可以补充校验通过后移除提示的逻辑。

if(input_name.value == "" || input_email.value == "" || input_password.value == "")
{
    // 先查询是否已存在错误提示
    var existTip = document.querySelector('.form-error-tip');
    // 不存在才创建插入
    if(!existTip) {
        var tag = document.createElement("p");
        // 给提示添加专属类名作为标识
        tag.className = "form-error-tip";
        var text = document.createTextNode("所有输入项均为必填");
        tag.appendChild(text);
        var element = document.getElementById("new");
        element.appendChild(tag);
    }
} else {
    // 校验通过时移除错误提示
    var existTip = document.querySelector('.form-error-tip');
    existTip && existTip.remove();
}

内容的提问来源于stack exchange，提问作者Omar Abd El-Latif