Home/ Questions/Q 451459
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T21:58:15+00:00

The goal here is to manipulate some DOM nodes before they are inserted into

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of:

    Element.extend(elt);

    Try:

    elt = Element.extend(elt);

    or

    elt = $(elt);

    As for how to do the traversing before you’ve inserted the node, here’s some random examples that illustrate a few features of Prototype:

    var elt = new Element('div', {
    className: 'someClass'
});

elt.insert(new Element('ul'));

var listitems = ['one', 'two', 'three'];

listitems.each(function(item){
    var elm = new Element('li');
    elm.innerHTML = item;
    elt.down('ul').insert(elm);
});

elt.getElementsBySelector('li'); //=> returns all LIs

elt.down('li'); //=> returns first li

elt.down('ul').down('li'); //=> also returns first li

elt.down('ul').down('li', 2); //=> should return the third if I'm not mistaken

// all before inserting it into the document!

    Check the brand new API documentation.

    Answering Ollie: my code above can be tested here, as you can see it works under IE 6.

    • 0