Lookup element by id within a DIV not injected in DOM

Question

I have a DOM element in memory that is yet to be injected in the page DOM. I want to lookup an element by id inside this DOM element but document.getElementById wont work as the element is not yet in the page DOM.

Any ideas on how to do this?

P.S.

• I know one approach is to use element.querySelector() but since IE7 doesnt support it, I can't.
• Not using Jquery

Answer 1

If you're using jQuery, you can write $('#someId', divElement).

Answer 2

It differs on if the browser is IE or non-IE. In either case you should use XPath. For Firefox and other compliant browsers, you would use evaluate and the Xpath query, with IE, you use selectNodes. So here they are side by side:

//Say you want an element with an id of "foo":
  var xpathQ = "//[@id='foo']";  // This is your query

  var myXML = someXMLsource;   // Get your XML  however you are getting it

 //Assuming non-IE

 var fooNode = myXML.evaluate(xpathQ, myXML, null, XPathResult.ANY_TYPE, null);

//Assuming IE

var fooNode = myXML.selectNodes(xpathQ);

And then do what you need to do with the element. I'm a bit embarrassed that IE actually makes this more clear cut, but every dog has it's day.