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?