using nested getElementById IE

Question

So basically I was trying to use javascript to write a custom tag for all the different browsers, but IE 8-9 (haven't tested others) seems to not work correctly (what a surprise) (I am trying to make this feature compatible in Chrome FF IE 8- 10)

if you test this in different browser you will see that result 2 does not work in IE, i could get it to work like in example one, however I would really prefer to use my custom tag name rather than an existing one.

How can i make result 2 show up in IE and still use the tag name "drop"? Also I really want the html to stay the same and just make changes to the javascript, Thanks in advance

http://jsfiddle.net/9GXtH/

<select id='a' style='display:none'>
    <option id='b'>t1</option>
</select>

<drop id='c' style='display:none'>
    <option id='d'>t2</option>
</drop>

<div id='result'></div>

<div id='result2'></div>


var queue = document.getElementsByTagName("select");
var options = queue.item(0).getElementsByTagName("option");

document.getElementById('result').innerHTML = options.item(0).innerHTML;




var queue = document.getElementsByTagName("select");
var options = queue.item(0).getElementsByTagName("option");

document.getElementById('result').innerHTML = "result: " +   options.item(0).innerHTML;


var queue = document.getElementsByTagName("drop");
var options = queue.item(0).getElementsByTagName("option");

document.getElementById('result2').innerHTML = "result2: " +  options.item(0).innerHTML;

Answer 1

If you had something like this:

    <custom:drop id='c1' style='display:none'>
        <custom:option id='d1'>t2c1</custom:option>
    </custom:drop>
    <custom:drop id='c2' style='display:none'>
        <custom:option id='d2'>t2c2</custom:option>
    </custom:drop>
    <custom:drop id='c3' style='display:none'>
        <custom:option id='d3'>t2c3</custom:option>
    </custom:drop>
    <custom:drop id='c4' style='display:none'>
        <custom:option id='d4'>t2c4</custom:option>
    </custom:drop>

You could iterate through them in your script like this:

$("custom\\:drop custom\\:option").each(function(){
            console.log( $(this).html() );
        });

1