如何将HTML附加到结尾处 <div> 使用jQuery？

Question

我有这个<div> ：

<div class="choose_radio rounded_border" style="border: 1px solid rgb(239, 126, 88);">
    <input type="radio" class="radio required error" name="ContactNewExisting" value="new" id="ContactNew" style="color: rgb(179, 180, 180); cursor: default;">
    <label for="ContactNewExisting" class="radio_new" style="color: rgb(255, 51, 51); cursor: default; margin: 0pt 2px; font-size: 110%;">New Business</label>
    <input type="radio" class="radio" name="ContactNewExisting" value="existing" id="ContactExisting" style="color: rgb(179, 180, 180); cursor: default;">
    <label for="ContactNewExisting" class="radio_new" style="color: rgb(255, 51, 51); cursor: default; margin: 0pt 2px; font-size: 110%;">Existing Business?</label>
</div>

我想附加这个<label> ：

<label class="error" generated="true">This field is required.</label>

所以最后的结果是这样的：

<div class="choose_radio rounded_border" style="border: 1px solid rgb(239, 126, 88);">
    <input type="radio" class="radio required error" name="ContactNewExisting" value="new" id="ContactNew" style="color: rgb(179, 180, 180); cursor: default;">
    <label for="ContactNewExisting" class="radio_new" style="color: rgb(255, 51, 51); cursor: default; margin: 0pt 2px; font-size: 110%;">New Business</label>
    <input type="radio" class="radio" name="ContactNewExisting" value="existing" id="ContactExisting" style="color: rgb(179, 180, 180); cursor: default;">
    <label for="ContactNewExisting" class="radio_new" style="color: rgb(255, 51, 51); cursor: default; margin: 0pt 2px; font-size: 110%;">Existing Business?</label>
<label class="error" generated="true">This field is required.</label>
</div>

我怎样才能用jQuery实现这一目标？

Answer 1

$('.choose_radio').append('<label class="error" generated="true">This field is required.</label>');

见http://api.jquery.com/append/

我不建议使用<label>标签。 <label>旨在作为单个表单字段的标签，并通过for属性指定该表单字段。 您的错误消息不适用于单个字段，因此它可以只是一个简单的<p> ，可能在其中包含<em>或<strong>以强调，因为它是一条错误消息。

Answer 2

.append()方法有什么问题？

Answer 3

使用append方法将元素添加为HTML片段：

$('.choose_radio').append(
  $('<label class="error" generated="true">This field is required.</label>')
);

或作为一个元素：

$('.choose_radio').append(
  $('<label/>', { 'class': 'error', generated: 'true' })
  .text('This field is required.')
);

Answer 4

这对我有用： -

<!-- Assign an id to the div -->
<div id="myDiv" class="choose_radio rounded_border" style="border: 1px solid rgb(239, 126, 88);">
    <input type="radio" class="radio required error" name="ContactNewExisting" value="new" id="ContactNew" style="color: rgb(179, 180, 180); cursor: default;">
    <label for="ContactNewExisting" class="radio_new" style="color: rgb(255, 51, 51); cursor: default; margin: 0pt 2px; font-size: 110%;">New Business</label>
    <input type="radio" class="radio" name="ContactNewExisting" value="existing" id="ContactExisting" style="color: rgb(179, 180, 180); cursor: default;">
    <label for="ContactNewExisting" class="radio_new" style="color: rgb(255, 51, 51); cursor: default; margin: 0pt 2px; font-size: 110%;">Existing Business?</label>
</div>

在Javascript中： -

$(document).ready(function(){
    $("#myDiv").append("<label class=\"error\" generated=\"true\">This field is required.</label>");  
});

这是我的测试： http ： //jsfiddle.net/deAye/