Web Analytics Made Easy -
StatCounter div.innerHTML dosnt work with IE? - CodingForum

Announcement

Collapse
No announcement yet.

div.innerHTML dosnt work with IE?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.

    Comment


    • #3
      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>

      Comment


      • #4
        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.

        Comment


        • #5
          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

          Comment


          • #6
            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.

            Comment


            • #7
              Originally posted by broadbeach View Post
              Ok how would I replace div.innerHTML with createElement(), appendChild() in the following example.
              createElement()

              setAttribute()

              appendChild()

              Comment


              • #8
                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>

                Comment


                • #9
                  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>

                  Comment


                  • #10
                    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>

                    Comment


                    • #11
                      WOW, yes it did work.

                      It now works in older versions of IE.

                      I dont know how, but it does.

                      Thanks for your help

                      Comment

                      Working...
                      X