How can I access html elements that were dynamically pushed into html?

Question

I have got a return from a server which is a block of html, which I unfortunately cannot influence. At the moment it is being dumped into my html via AJAX. The problem is that internet explorer doesnt recognize any elements that come through in this block of html

eg I cannot:

document.getElementById(someValueId)

because internet explorer thinks that, in the object explorer, that the div which someValueId is in is empty.

Does anyone have any idea how I can actually get to those elements?

Edit for some clarity:

I actually create a bunch of html elements on the server and push them into a div The entire thing works in firefox, but if I try to run code like

<input type="button" onclick="document.form['invoice'].submit value="Confirm" />

The element is not found by Ie. even a default submit input wont work.

I inspected the div I populated the data into in Ie and for some obscure reason it thinks that everything I added does not exist at all ( it is literally nowhere in my source )

I tried doing the same thing, but pushed the call into an IFrame, which meant that the code would suddenly start working ( eg I can then submit the form ), but this is causing way too many issues with other parts of the code, so I figure I want to do it properly.

Some Example code: This is the form being returned.

<form action="orderNew.php?submitOrder=1" method="POST" name="invoice">      
     <input name="line[181][amount]" id="line[181][amount]" value="" size="10" onchange="isNumeric(this.id)" type="text">
     <input name="line[181][itemId]" value="181" type="hidden">          
<input type="button" onclick="document.forms['invoice'].submit()" value="Confirm" />

isNumeric () calls

function isNumeric(elemId){
var numericExpression = /^[0-9]+$/;
if(document.getElementById(elemId).value.match(numericExpression)){
    return true;
}
else{
    alert('Input not numeric.');
    document.getElementById(elemId).focus();
    return false;
}
}

isNumeric and Confirm will never fire. They actually fail silently.

Answer 1

If you call document.getElementById() after the AJAX call has populated the data it shouldn't have any problem finding them. Are you sure this is not the problem?

Answer 2

I would check whats going on by using the ie dev toolbar or try it in firefox using firebug. You should be able to examine the problem a bit more easily using these tools.

Answer 3

document.getElementById() will work fine, no matter where the HTML comes from.

You will just have to

1. actually attach the HTML to the document after the AJAX call and
2. take care you don't have multiple IDs.

Element IDs must be unique. My bet is that is your problem.

Answer 4

If you wont to be be able to modify html elements that came via ajax, i would take a look at the jQuery Library, it supports Live element handling.

http://api.jquery.com/live/

This will allow you to attach event entities onto content that is not part of the document upon initial load!

Answer 5

I feel like an idiot... Did not close the form tag. Thanks for everyone that helped.