How can I append HTML to the end of a <div> using jQuery?

Question

I have this <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>

and I want to append this <label> :

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

so the final outcome is like this:

<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>

How can I achieve that with jQuery?

Answer 1

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

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

I wouldn't recommend using a <label> tag though. <label> s are intended to be labels for a single form field, and specify that form field via the for attribute. Your error message doesn't apply to a single field, so it can just be a plain <p> , maybe with <em> or <strong> inside it for emphasis as it's an error message.

Answer 2

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

Answer 3

Use the append method to add the element as an HTML snippet:

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

Or as an element:

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

Answer 4

This works for me:-

<!-- 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>

In the Javascript:-

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

Here's my test: http://jsfiddle.net/deAye/