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?
$('.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.
What's wrong with the .append()
method?
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.')
);
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/
精彩评论