Reading custom HTML elements using JavaScript does not work in IE

Question

I have some custom elements on my HTML page. To make some changes, I wrote JavaScript.

It has some custom elements. These items 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> 

Necessary conclusion:

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

JavaScript is 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 works fine in Firefox, but not in IE.

Edit:

After adding HTML elements and adding various 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. It does not work for IE (version 8).

Can any suggestions be made to make them work in both IE and Firefox?

Answer 1

While I was playing computer games last night, I came up with an idea that could solve your problem. When I tried this myself, I have a theory that invalid html tags will not be created as an html object, so you cannot access functions from the DOM. So I changed the user tags to include the dd tag, although it is a valid html tag in the div tags and added a dummy css class as an identifier. The next change I made is to add the getElementsByClass() method. Since document.getElementsByClassName() does not exist for IE8 and older, I repeated that I found a function that does the same thing - the difference in the function call is there . The result of these changes is the 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 it works ...

Answer 2

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

I am not sure if this is the intended behavior, since you did not indicate clearly what is wrong with the script in IE. Generally speaking, I would not introduce custom elements, but rely on those specified in HTML (and HTML5), and in the case of using class names, to add more semantics, if necessary.

Answer 3

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

Custom HTML is not valid HTML. Trash in → Trash.

Answer 4

I think I noticed where you did wrong.

I have some custom elements on my HTML page.

There. This is where you did wrong.

Just kidding. I don't have much experience with custom elements, but I know that IE doesn't work very well with unknown tags, for example. new tags in HTML5 cannot be originally written in IE.

For this problem, you can fix this by instantiating the tag in JavaScript before trying to style it. Perhaps this will also fix your problem. So, the top of your script will look like this:

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

(I really don't know if this will work.)

Answer 5

IE (even including IE9) does not recognize user elements. Yes, the document.createElement () tag works, if possible in your script.

For information on how Microsoft wants you to do this, look at this:

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