select hidden input in div, unable to find; however source shows input tag in div

Question

this is what the page looks like

<div id="DivID">
    <input type="hidden" id="Hidden1" value="Value1" />
    <input type="hidden" id="Hidden2" value="Value2" />

    <bunch of other tags>
</div>

When I do $("#DivID").find("input#Hidden1").val() I'm getting undefined. However when I $(":input#Hidden1").val() I'm getting Value1

Investigating further, $("#DivID").html() simply returns with the hidden inputs not in sight.

I can confirm that the input tags are inside the div.

UPDATE Input fields were getting moved out of the div and into the head of the page for some reason.

Moving the input fields to the bottom of the div kept them from wandering and allowed me to get the functionality I was looking for.

As far as how or why this was happening, I haven't the foggiest idea. This issue occured with IE 8.0.6.

If anybody can point me to any sort of bug report for this issue or explain the how and/or why I'll accept their answer.

Answer 1

If the .html() call returns no inner elements as well, it seems they're either not where you think, or being added later.

• Check that first your markup is valid here: http://validator.w3.org/
• Also make sure they aren't being added dynamically later, after your current code is running.