internet explorer - Reading custom HTML elements using JavaScript is not working in IE - Stack Overflow

admin管理员组

文章数量:1419223

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="">google</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="">google</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?

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.">google.</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.">google.</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?

• javascript
• internet-explorer

Share Improve this question Follow edited Jul 17, 2012 at 9:04 Patan asked Jul 17, 2012 at 7:52 PatanPatan 17.9k4040 gold badges132132 silver badges212212 bronze badges 3

• @ubercooluk: it’s a custom HTML element that User 222 made up for some reason. – Paul D. Waite Commented Jul 17, 2012 at 8:09
• Which version of Internet Explorer is giving you problems? – Paul D. Waite Commented Jul 17, 2012 at 8:09
• Actually dd is not a custom element, it indicates the definition in a definition list (dl). – Teemu Commented Jul 17, 2012 at 9:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

While I played puter 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...

I tried it on jsfiddle and this version gives the same result for me on FF as well as on IE9: http://jsfiddle/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.

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

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

I think I’ve spotted where you went wrong.

I have some custom elements in my HTML page.

There. That’s where you went wrong.

Just kidding. I don’t have much experience with custom elements, but I know that IE doesn’t deal very well with unknown tags, e.g. the new tags in HTML5 can’t initially be styled in IE.

For that problem, you can fix it by creating an instance of the tag in JavaScript before you try to style it. Maybe this would fix your problem too. So, the top of your script would look like this:

<script type="text/javascript">
    document.createElement('dd');
    document.createElement('dev');
    document.createElement('rr');

    var devs = document.getElementsByTagName('dev');

(I don’t actually know if that would work though.)

IE (even including IE9) does not recognize custom elements. Yes, the document.createElement() trick works, if that's doable in your scenario.

For the data on how Microsoft would want you to do this, have a look at this:

http://ajaxian./archives/adding-custom-tags-to-internet-explorer-the-official-way

本文标签： internet explorerReading custom HTML elements using JavaScript is not working in IEStack Overflow