Reading custom HTML elements using JavaScript is not working in IE

Question

I have some custom elements in my HTML page. To do some modifications on it, I wrote a JavaScript.

It has got some custom elements in it. These elements are added intentionally.

Sample Source:

<div>       
        <br />
     <a name="IDATLQHE"></a>
    <h2 class="subhead" xmlns="">
    <dev>
        <dd>
            <span>abcd</span>
        </dd>

        <rr>
            <span>
                    <a title="google" href="http://google.com">google.com</a>
            </span>
       </rr>                    
    </dev>
    </h2>       
</div>

Output needed:

I want to replace the contents of the <a> element in the <rr> element with the contents of the <dd> element. (The elements <rr>, <dd> and <dev> are the custom elements.)

JavaScript written:

<script type="text/javascript">
 var devs = document.getElementsByTagName('dev');
for(var i = 0, len = devs.length; i < len; i++)
{
    var dev = devs[i],
        h2 = dev.getElementsByTagName('rr'),
        h3 = dev.getElementsByTagName('dd');
    if(h2.length === 1)
    {
        var aa= h2[0],
        aaa=aa.getElementsByTagName('a');
        if(h2.length === 1 && h3.length === 1)
        {
            aaa[0].innerHTML = h3[0].innerHTML;
            h3[0].innerHTML=null;
        }
    }
}
</script>

This script is working fine in Firefox, but not in IE.

Edit:

After adding the HTML elements and adding different class attributes.

<div>       
            <br />
         <a name="IDATLQHE"></a>
        <h2 class="subhead" xmlns="">
         <div class="dummy">
             <div class="dummyy">
                <span>abcd</span>
            </div>

            <div class="dummyyy">
                <span>
                        <a title="google" href="http://google.com">google.com</a>
                </span>
          </div>                
        </div>
        </h2>       
    </div>

Modified Java Script:

  <script type="text/javascript">
    var divs = document.getElementsByClassName('dummy');
    for(var i = 0, len = divs.length; i < len; i++)
    {
        var div = divs[i],
        h2 = div.getElementsByClassName('dummyyy'),
        h3 = div.getElementsByClassName('dummyy');
        if(h2.length === 1)
        {
            var aa= h2[0],
            aaa=aa.getElementsByTagName('a');
            if(h2.length === 1 && h3.length === 1)
            {
                aaa[0].innerHTML = h3[0].innerHTML;
                h3[0].innerHTML=null;
            }
        }
    }

I am still facing the same problem. Its not working for IE(Version 8).

Can any one suggest the changes to be done to make it work in both IE and Firefox?

Answer 1

While I played computer games at last evening I came up with idea that could solve you problem. When I tried it out by my self I've got the theory that non valid html tags won't be created as an html object so you can't access those with functions from the DOM. So I changed the custom tags -inclusive the dd tag though it is a valid html tag- into div tags and added a dummy css class as an identifier. The next change I made was to add the function getElementsByClass() method. Because document.getElementsByClassName() does not exists for IE8 and older, I rembered that I had found a function that does the same -note the differents in calling the function- there. The result of these changes is following:

   <script type="text/javascript">
    function test() 
    {
        var devs = getElementsByClass('dev');
        for(var i = 0, len = devs.length; i < len; i++)
        {
            var h2 = getElementsByClass('rr', devs[i]);
            var h3 = getElementsByClass('dd', devs[i]);
            if(h2.length === 1)
            {
                aaa=h2[0].getElementsByTagName('a');
                if(h2.length === 1 && h3.length === 1)
                {
                    aaa[0].innerHTML = h3[0].innerHTML;
                    h3[0].innerHTML = "";
                }
            }
        }
    }

    function getElementsByClass( searchClass, domNode, tagName) { 
        if (domNode == null) domNode = document;
        if (tagName == null) tagName = '*';
        var el = new Array();
        var tags = domNode.getElementsByTagName(tagName);
        var tcl = " "+searchClass+" ";
        for(i=0,j=0; i<tags.length; i++) { 
            var test = " " + tags[i].className + " ";
            if (test.indexOf(tcl) != -1) 
                el[j++] = tags[i];
        } 
        return el;
    }
    </script>

And it seems that does work...

Answer 2

I tried it on jsfiddle and this version gives the same result for me on FF as well as on IE9: http://jsfiddle.net/qWP2t/1/

I'm not sure whether this is the intended behavior as you didn't specify clearly what is wrong with the script in IE. Generally speaking though, I'd not introduce custom elements but rather rely on those specified by HTML (and HTML5) and in case use class names to add more semantics if needed.

Answer 3

Replace <rr> and <dev> with HTML elements (possibly with a class attribute).

Custom HTML is Invalid HTML. Garbage In → Garbage Out.