如何在JavaScript/JQuery中添加单个元素？

Html:

JavaScript:

<div class="register-form-box">
    <label>Name :</label>
    <input name="name" type="text" onblur="return validateForm(this)" data-lv-msg="Please enter your name" />
</div>

上面的代码运行良好。但错误消息“请输入您的姓名”重复出现

要将什么更改为只添加一次？

在添加之前删除所有错误消息：

<script>
function validateForm(field){
 if(!field.value.trim()){
  var msg = field.getAttribute("data-lv-msg");
  $(field).after('<div class="error_message">'+msg+'</div>');
  field.focus();
  return false;
 }
}
</script>

---

在我看来，这是一个更好的解决办法

$function{ $input.required.onblur，函数{ $this.next.toggle$.trim$this.val==； }; }; .错误{显示：无} 姓名： 请输入您的姓名

---

稍微修改一下代码，这样你就可以实现你想要的

在插入错误消息div之前，只需检查它是否已经存在。 如果不存在，则只插入div

您可以使用$.error\u message.length检查是否显示div

代码段：

使现代化 如果要对多个输入标记使用错误消息div：

给输入标签一个id

使用同级选择器检查是否显示div

您可以使用$name+.error\u message.length检查div是否存在。

---

在此处更改：onblur=validateFormthis返回导致调用它两次。您可以在html中创建，设置可见性：none；，在jQuery代码中，可以设置可见性：visible；。show and.hide是一个更好的选择，因为存在jQuery

function validateForm(field){
 $(".error_message").remove();
 if(!field.value.trim()){
  var msg = field.getAttribute("data-lv-msg");
  $(field).after('<div class="error_message">'+msg+'</div>');
  field.focus();
  return false;
 }
}

function validateForm(field){
 if(!field.value.trim()){
  var msg = field.getAttribute("data-lv-msg");
  if(!$(".error_message").length)
   $(field).after('<div class="error_message">'+msg+'</div>');
  field.focus();
  return false;
 }
}