Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts

    div.innerHTML dosnt work with IE?

    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


    Code:
    <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>

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    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.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    Ok how would I replace div.innerHTML with createElement(), appendChild() in the following example.

    Table to pull the info from:

    Code:
      <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)

    Code:
    <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>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,396
    Thanks
    12
    Thanked 569 Times in 562 Posts
    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

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,924
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by devnull69 View Post
    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/vi...=14448&start=3
    may throw some light.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by broadbeach View Post
    Ok how would I replace div.innerHTML with createElement(), appendChild() in the following example.
    createElement()

    setAttribute()

    appendChild()

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    967
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Quote Originally Posted by broadbeach View Post
    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


    Code:
    <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.


    Code:
    <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>

  • Users who have thanked DaveyErwin for this post:

    broadbeach (09-05-2011)

  • #9
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    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">


    Code:
    <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>

  • #10
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by broadbeach View Post

    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:
    Code:
    <!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>

  • Users who have thanked Logic Ali for this post:

    broadbeach (09-05-2011)

  • #11
    New Coder
    Join Date
    Aug 2011
    Posts
    15
    Thanks
    8
    Thanked 0 Times in 0 Posts
    WOW, yes it did work.

    It now works in older versions of IE.

    I dont know how, but it does.

    Thanks for your help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •