div.innerHTML dosnt work with IE?

[broadbeach]

Hi Guys for some reason this does not work in IE, any ideas?

I did a quick google and it seems div.innerHTML dosnt work with IE. Is this true?

If so is there a work around

<script type="text/javascript">
function addLinks()
{
	var changeOnly = document.getElementsByClassName("changeLinks");
	for ( var c = 0; c<changeOnly.length; ++c )
	{
		var divArray = changeOnly[c].getElementsByClassName("productitemcell");
		for (var i = 0; i<divArray.length; i++)
		{
			var div = divArray[i];
			div.innerHTML = '<a href="/customise-forms/' + escape(div.innerHTML) + '">Click Here To Customise</a>';
		}
	}
}
window.onload = addLinks;
</script>

[webdev1958]

1 - it's risky to use js variable names that are the same as html tag names. Try to avoid it.

2 - using innerHTML to create elements increases the possibility of browser incompatibility issues. You should be using DOM methods createElement(), appendChild() etc etc to create elements and to place them where you want them in the dom.

[broadbeach]

Ok how would I replace div.innerHTML with createElement(), appendChild() in the following example.

Table to pull the info from:

  <table>
  <tbody>
    <tr>
      <td>
          <div class="productitemcell">Champagne Weadding</div>
          <div class="productitemcell">Party Like 1999</div>
      </td>
      <td>
        <div id="changeLinks">
            <div class="productitemcell">1 line custom</div>
            <div class="productitemcell">2 line custom</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

And the JS which turns that info into a link: (currently using div.innerHTML)

<script type="text/javascript">
function addLinks()
{
	var changeOnly = document.getElementsByClassName("changeLinks");
	for ( var c = 0; c<changeOnly.length; ++c )
	{
		var divArray = changeOnly[c].getElementsByClassName("productitemcell");
		for (var i = 0; i<divArray.length; i++)
		{
			var div = divArray[i];
			div.innerHTML = '<a href="/customise-forms/' + escape(div.innerHTML) + '">Click Here To Customise</a>';
		}
	}
}
window.onload = addLinks;
</script>

[Philip M]

In fact innerHTML (although it originated with IE) is supported by all major browsers (especially IE!)

In fact your trouble is webdev's item 1.

In Internet Explorer, names and IDs are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or ID. Also tag names such as div.
You should also avoid giving names or id's to your variables/functions/arguments/forms words which are JavaScript methods/properties/attributes such as 'name' or 'id' or 'value' or 'test' or 'text' or 'checked' or 'go' or 'replace' or 'button' or 'radio' or 'parseInt'.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[devnull69]

The problem is not about the innerHTML of DIVs, it's about manipulating the innerHTML of a table / table elements. This is not allowed for IE

[Philip M]

The problem is not about the innerHTML of DIVs, it's about manipulating the innerHTML of a table / table elements. This is not allowed for IE

http://www.siteexperts.com/forums/viewConverse.asp?d_id=14448&start=3

may throw some light.

[webdev1958]

Ok how would I replace div.innerHTML with createElement(), appendChild() in the following example.

createElement()

setAttribute()

appendChild()

[DaveyErwin]

Hi Guys for some reason this does not work in IE, any ideas?

I did a quick google and it seems div.innerHTML dosnt work with IE. Is this true?

If so is there a work around

<script type="text/javascript">
function addLinks()
{
	var changeOnly = document.getElementsByClassName("changeLinks");
	for ( var c = 0; c<changeOnly.length; ++c )
	{
		var divArray = changeOnly[c].getElementsByClassName("productitemcell");
		for (var i = 0; i<divArray.length; i++)
		{
			var div = divArray[i];
			div.innerHTML = '<a href="/customise-forms/' + escape(div.innerHTML) + '">Click Here To Customise</a>';
		}
	}
}
window.onload = addLinks;
</script>

You didn't say what version of ie ?
There is no getElementsByClassName
in ie 8 and below.

<script type="text/javascript">

function addLinks()
{
var myDiv = document.getElementById("myDiv")	
myDiv.innerHTML = '<a href="/customise-forms/' + escape(myDiv.innerHTML) + '">Click Here To Customise</a>';

	}

window.onload = addLinks;

</script>
</body>
</html>


 <table>
  <tbody>
    <tr>
      <td>
          <div class="productitemcell">Champagne Weadding</div>
          <div class="productitemcell">Party Like 1999</div>
      </td>
      <td>
        <div class="changeLinks">
            <div id="myDiv" class="productitemcell">1 line custom</div>
            <div class="productitemcell">2 line custom</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

[broadbeach]

Thanks for your reply

Yes we are testing it in IE 8 and lower.

We would like to use your example above however with the limitations of the CMS we are using we are unable to manipulate the div classes:

<div class="productitemcell">

As these are auto generated. That is why we have had to use getElementsByClassName.

As you can see in red we are able to put a div (<div class="changeLinks">) around the them, if that helps.

Can anyone see a solution to use the example below without having to change the <div class="productitemcell">

<script type="text/javascript">

function addLinks()
{
var myDiv = document.getElementById("myDiv")	
myDiv.innerHTML = '<a href="/customise-forms/' + escape(myDiv.innerHTML) + '">Click Here To Customise</a>';

	}

window.onload = addLinks;

</script>
</body>
</html>


 <table>
  <tbody>
    <tr>
      <td>
          <div class="productitemcell">Champagne Weadding</div>
          <div class="productitemcell">Party Like 1999</div>
      </td>
      <td>
        [COLOR="Red"]<div class="changeLinks">[/COLOR]
            <div [COLOR="Red"]id="myDiv"[/COLOR] class="productitemcell">1 line custom</div>
            <div class="productitemcell">2 line custom</div>
       [COLOR="Red"] </div>[/COLOR]
      </td>
    </tr>
  </tbody>
</table>

[Logic Ali]

Yes we are testing it in IE 8 and lower.

We would like to use your example above however with the limitations of the CMS we are using we are unable to manipulate the div classes:

<div class="productitemcell">

As these are auto generated. That is why we have had to use getElementsByClassName.

I'm not sure if I've followed this properly, but does this do what's required:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
  <table>
  <tbody>
    <tr>
      <td>
          <div class="productitemcell">Champagne Weadding</div>
          <div class="productitemcell">Party Like 1999</div>
      </td>
      <td>
        <div class="changeLinks">
            <div class="productitemcell">1 line custom</div>
            <div class="productitemcell">2 line custom</div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

<script type="text/javascript">

/** Modified from http://javascript.about.com/library/bldom08.htm **/

if( !document.getElementsByClassName )
{
  document.getElementsByClassName = function(cl) 
  {
   var retNode = [], 
       myclass = new RegExp('\\b'+cl+'\\b') 
       elem = this.getElementsByTagName( '*' );
     
   for (var i = 0, classes; i < elem.length; i++) 
   {
     classes = elem[i].className;
       
     if( myclass.test( classes ) ) 
     {
       if( !elem[i].getElementsByClassName )  
         elem[i].getElementsByClassName = document.getElementsByClassName;
       retNode.push(elem[i]);
     }
   }
     
   return retNode;
  } 
}

function addLinks()
{
  var changeOnly = document.getElementsByClassName("changeLinks");
    
  for( var c = 0; c < changeOnly.length; ++c )
  {
    var divArray = changeOnly[c].getElementsByClassName("productitemcell");
        
    for( var i = 0; i < divArray.length; i++ )
    {
      var theDiv = divArray[i],
          aLink = document.createElement( 'a' );
                
          aLink.href =  "/customise-forms/" + escape( theDiv.innerHTML );
            
          aLink.appendChild( document.createTextNode( "Click Here To Customise" ) );
            
          while( theDiv.firstChild )
            theDiv.removeChild( theDiv.firstChild );
            
          theDiv.appendChild( aLink );
    }
  }
}
window.onload = addLinks;
</script>

</body>
</html>

[broadbeach]

WOW, yes it did work.

It now works in older versions of IE.

I dont know how, but it does.

Thanks for your help