Javascript 如何在另一个范围内追加范围？

这是我的 基本上，我想在span中附加一个span元素，id为“spanValidation”。我还想在一些元素中添加和删除一些类。以前在MVC和JQuery中使用自定义模型验证来完成，但现在我想在JQuery中处理它。 这是我的HTML：

<div class="form-group">
    <div class="row">
      <div class="col-md-4">
        <label class="control-label text-primary" for="SSN">Social Security Number</label><span> </span><span class="help-inline">(Last Four Digits Only)</span>
        <input name="SSN" class="form-control" id="SSN" type="text" value="" data-val-length-max="4" data-val-length="Enter only the last four digits of the SSN." data-val="true" data-val-regex-pattern="^\d{4}$" data-val-regex="Enter only the last four digits of the SSN.">
      </div>
      <div class="col-md-4">
        <br class="hidden-sm hidden-xs">
        <span class="field-validation-valid text-danger" id="spanValidation" data-valmsg-replace="true" data-valmsg-for="SSN"></span>


      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div> 
  <button type="submit" id="btnSubmit" class="btn btn-primary">Submit</button>

社会保险号码（仅限最后四位数字）


提交

这是我的JS：

$('#btnSubmit').click(function (event) {
 alert("hi");
 if ( $("#SSN").val() === "" ) {
    $(".spanValidation").addClass("field-validation-error").removeClass("field-validation-valid");
    $(".spanValidation").append("<span >Enter at least one of the following: Account Number, SSN, or Birth Date.</span>");
  }
  else {
    $(".spanValidation").removeClass("field-validation-error").addClass("field-validation-valid");
    $('span[id^="errorSpan"]').remove();
  }
 }

$（'btnSubmit'）。单击（函数（事件）{
警报（“hi”）；
如果（$（“#SSN”）.val（）=“”）{
$（.spanValidation”）.addClass（“字段验证错误”）.removeClass（“字段验证有效”）；
$（“.spanValidation”）.append（“输入以下至少一项：账号、SSN或出生日期”）；
}
否则{
$（.spanValidation”）.removeClass（“字段验证错误”）.addClass（“字段验证有效”）；
$（'span[id^=“errorSpan”]”）。删除（）；
}
}

问题是，即使代码正在执行，但ut没有添加id为“errorSpan”的新span，也没有更新与元素关联的类。

---

提前感谢。

像这样使用它：当您像类一样使用它时，验证是id

$('#btnSubmit').click(function (event) {
alert("hi");


if ( $("#SSN").val() === "" ) {
    $("#spanValidation").addClass("field-validation-error").removeClass("field-validation-valid");
    $("#spanValidation").append("<span >Enter at least one of the following: Account Number, SSN, or Birth Date.</span>");
  }
  else {
    $("#spanValidation").removeClass("field-validation-error").addClass("field-validation-valid");
    $('span[id^="errorSpan"]').remove();
  }
 }

$（'btnSubmit'）。单击（函数（事件）{
警报（“hi”）；
如果（$（“#SSN”）.val（）=“”）{
$（“#spanValidation”）.addClass（“字段验证错误”）.removeClass（“字段验证有效”）；
$（“#spanValidation”）.append（“输入以下至少一项：账号、SSN或出生日期”）；
}
否则{
$（“#spanValidation”）.removeClass（“字段验证错误”）.addClass（“字段验证有效”）；
$（'span[id^=“errorSpan”]”）。删除（）；
}
}

您希望包括jQuery并添加结束符

）

，请记住，

id

选择器由

#

引用，而不是由

引用，如注释中所述：

$('#btnSubmit').click(function (event) {
  alert("hi");
  if ( $("#SSN").val() === "" ) {
    $("#spanValidation").addClass("field-validation-error").removeClass("field-validation-valid");
    $("#spanValidation").append("<span >Enter at least one of the following: Account Number, SSN, or Birth Date.</span>");
  }
  else {
    $("#spanValidation").removeClass("field-validation-error").addClass("field-validation-valid");
    $('span[id^="errorSpan"]').remove();
  }
});

删除（）。新的span没有id，除非父span中有任何您想要保留的内容，否则不必担心将选择器指定为

。empty（）

将删除所有内容

---

还有？问题出在哪里？您的HTML将“spanValidation”作为元素id，但您使用jQuery将其引用为“.spanValidation”-

用于类引用，因此您需要

“#spanValidation”

@Pointy，对不起，这是一个复制粘贴错误，在实际代码中它不存在..即使更改后，它仍然没有添加span。“复制粘贴”错误？您的复制粘贴过程不知何故更改了

$（“#spanValidation”）

为

$（“.spanValidation”）

？@user2948533谢谢，但请浏览上面的评论部分！@user2948533用户不必阅读所有评论。如果问题不准确，请修复它。如果有人提供答案，请解释为什么它不适合您的需要Hank Peter，但是如果您删除了新添加的span的id，我如何在SSN tex时删除它t框不是空的（我指的是其他部分），我明白你的意思。

$（'span[id^=“errorSpan”]'）。remove（）；

应该是

$（'spanValidation'）。empty（）；

。看看这个：

$('#spanValidation').empty();