jQuery - 追加和刪除HTML代碼

Question

在jQuery中，如何將HTML行添加到某些HTML中，以及刪除HTML行？

這是前面的代碼：

<div class="form-group">
    <label class="control-label col-md-2" for="txtCvc">Cvc</label>
    <div class="col-md-10">
        <input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
    </div>
</div>

這是后面的代碼：

<div class="form-group">
    <label class="control-label col-md-2" for="txtCvc">Cvc</label>
    <div class="col-md-10">
        <input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
        <span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>
    </div>
</div>

我需要添加這行代碼：

<span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>

另外，相反。 如何刪除這行代碼？

這是前面的代碼：

<div class="form-group">
    <label class="control-label col-md-2" for="txtCvc">Cvc</label>
    <div class="col-md-10">
        <input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
        <span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>
    </div>
</div>

這是后面的代碼：

<div class="form-group">
    <label class="control-label col-md-2" for="txtCvc">Cvc</label>
    <div class="col-md-10">
        <input class="form-control text-box single-line" id="txtCvc" name="Cvc" type="text" value="" />
    </div>
</div>

對不起，我忘了提到我是jQuery的初學者。 我正在查看追加和刪除功能。 提前致謝。

Answer 1

只需使用.append（）和.remove（）方法。

Answer 2

如果你使用show（）和hide（）來表示錯誤信息會更合適

$('.field-validation-error').show();

用於顯示消息和

$('.field-validation-error').hide();

隱藏它，使用if else來檢查你的狀況。

Answer 3

如果您知道要顯示/隱藏驗證消息的輸入字段元素，則可以使用after方法添加消息：

$field.after('<span class="field-validation-error" data-valmsg-for="txtCvc" data-valmsg-replace="true">Test message.</span>');

並remove以刪除它：

$field.next('.field-validation-error').remove();

所以$field可以是這樣的：

var $field = $('#txtCvc');