Question

I’m trying to append a note to a <dd> tag in my page, but for some reason, it’s happening twice. Here’s the <dd> tag i’m trying to append to:

<dd>
    <input type="hidden" value="Choose a Country" class="FormFieldChoosePrefix">
    <input type="hidden" value="11" class="FormFieldId">
    <input type="hidden" value="2" class="FormFieldFormId">
    <input type="hidden" value="singleselect" class="FormFieldType">
    <input type="hidden" value="Country" class="FormFieldPrivateId">
        <select size="1" name="FormField[2][11]" id="FormField_11" style="" class="Field200 FormField">
            <option value="">Choose a Country</option>blah blah</select>
-- want code to be added here --
</dd>

I have tried using the following:

$('dd:contains("Choose a Country").append('whatever');

$('#FormField_11').parent().append('whatever');

$('#FormField_11').parent().first().append('whatever');

and even

if ($('#FormField_11').parent().html().indexOf('whatever') == -1){
    $('#FormField_11').parent().append('whatever');
}

all to no avail – every time, ‘whatever’ is showing up twice. The weirdest part is, however, that i do the same thing for another <dd> tag later on in the page, and it works perfectly:

<dd>
    <input type="hidden" value="Choose a Country" class="FormFieldChoosePrefix">
    <input type="hidden" value="21" class="FormFieldId">
    <input type="hidden" value="3" class="FormFieldFormId">
    <input type="hidden" value="singleselect" class="FormFieldType">
    <input type="hidden" value="Country" class="FormFieldPrivateId">
    <select size="1" name="FormField[3][21]" id="FormField_21" style="" class="Field200 FormField">
            <option value="">Choose a Country</option>
            blah blah
        </select>
</dd>

and my javascript, which works:

$('#FormField_21').parent().append('whatever');

Thanks

Answer 1

This is because .append() is evaluating on top of $('#FormField_11') and not of .parent().

This is how jQuery works.

To do what you are wanting, you for example could do:

var x = $('#FormField_11').parent();
x.append('whatever');