The goal here is to manipulate some DOM nodes before they are inserted into the document, using prototypeJs methods.
Test cases:
<html>
<head>
<script type="text/javascript" src="prototype.js" ></script>
</head>
<body>
<script type="text/javascript">
var elt = document.createElement("DIV");
elt.id="root";
elt.innerHTML="<div id='stuff'><span id='junk'></span></div>";
console.info(elt);
console.info(Element.down(elt, "#stuff"));
console.info(Element.select(elt, "#stuff"));
console.info(elt.down("#stuff"));
console.info(elt.select("#stuff"));
Element.extend(elt);
console.info(elt.down("#stuff"));
console.info(elt.select("#stuff"));
document.body.appendChild(elt);
console.info($("root").down("#stuff"));
console.info($("root").select("#stuff"));
</script>
</body>
</html>
In Firefox all 8 tests correctly output either the "stuff" div or a collection containing only the "stuff" div.
In ie (tested in 7/8) I would expect the second two tests only to fail as prototype does not automatically extend the DOM as in ff. However what actually happens is all the tests up to the point the element is inserted fail the two subsequent tests are fine. Once I call Element.extend if would expect the down / select methods to be available.
If this behaviour as expected and if so why?
How would you recommend I do my DOM traversal on nodes which are in memory in a cross browser friendly manner?
So thanks to Kaze no Koe, I've narrowed the issue down. It seems that this does work in ie but not for id selectors.
<html>
<head>
<script type="text/javascript" src="prototype.js" ></script>
</head>
<body>
<script type="text/javascript">
var elt = document.createElement("DIV");
elt.id="root";
elt.innerHTML="<div id='stuff' class='junk'></div>";
elt = $(elt);
console.info(elt.down("DIV")); //fine
console.info(elt.down(".junk")); //fine
console.info(elt.down("#stuff")); //undefined in ie, fine in ff
</script>
</body>
</html>
It's not a problem for me to use class instead of id, so I can solve my original issue but for completeness sake can anyone explain why id selectors won't work before insertion in ie only? My guess would be that the ie implementation relies on document.getElementById whilst the ff one doesn't. Anyone confirm?