SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2002
    Location
    Rochester, NY
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    innerHTML & quotation marks

    I'm having another issue (yay!) with IE vs. Firefox...

    Getting innerHTML for a div in IE seems to result in any quotation marks around attributes being wiped out, and the tags are capitalized.

    Namely:

    Code:
    <div id="date1030" class="date"><span class="hts">1107790200/1107792000</span>10:30</div></div>
    becomes

    Code:
      <DIV id=date1030 class=date><SPAN class=hts>1107790200/1107792000</SPAN >10:30</DIV></DIV>
    This doesn't happen in Mozilla, and thus I've got a substr() call that works in one but returns the wrong part in another. Argh!

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You have to understand a little bit about innerHTML.

    Basically, there are two copies of every page: the code as you wrote it and the code as the browser uses to render. InnerHTML in IE uses the IE-generated code, not the code as you wrote it.

    Since you seem to be searching for a particular attribute or piece of text, you might be better off using DOM methods to extract the data you need rather than parsing through an innerHTML string.

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2002
    Location
    Rochester, NY
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Giving .hts IDs let me work around the problem. I didn't realize innerHTML was the post-render code... how bizzare.

    THanks for the info!

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regarding DOM methods:

    If you do something like:
    <div onclick="alert(this.nodeName);"></div>

    You get DIV

    Here's a very silly function I tacked together:
    Code:
    <script>
    function Inner(obj) {
    	// put your fave browser detection script here
    	if( document.all ) {
    		// IE
    		return jHTML(obj, true, true, false, true);
    	} else {
    		// the rest
    		return obj.innerHTML;
    	}
    }
    //
    // param 1 - the object
    // param 2 - do you want the tags in lowercase, true/false
    // param 3 - do you want double quotes around your attribute values, true/false
    // param 4 - do you want "contentEditable" attribute included in every tag, true/false
    // param 5 - is this the first recursion, true/false
    //
    function jHTML(obj, bLower, bQuotes, bCEdit, bIsFirst) {
    	var sHTML = "";
    	var sQuote = "\"";
    	if( !bQuotes )
    		sQuote = "";
    	if( obj.nodeType == 3 ) {
    		sHTML = obj.nodeValue;
    	} else {
    		if( !bIsFirst ) {
    			sHTML = sHTML + "<"
    			if( bLower ) {
    				sHTML += obj.nodeName.toLowerCase();
    			} else {
    				sHTML += obj.nodeName;
    			}
    			for( var i=0; i < obj.attributes.length; i++ ) {
    				if( obj.attributes[i].nodeValue != null && obj.attributes[i].nodeValue != "") {
    					if( bCEdit || obj.attributes[i].nodeName != "contentEditable" ) {
    						sHTML += " " + obj.attributes[i].nodeName + "=\"" + obj.attributes[i].nodeValue + "\"";
    					}
    				}
    			}
    			sHTML += ">"
    		}
    		for( var i=0; i < obj.childNodes.length; i++ ) {
    			sHTML += jHTML(obj.childNodes[i], bLower, bQuotes, bCEdit, false);
    		}
    		if( !bIsFirst ) {
    			sHTML += "</";
    			if( bLower ) {
    				sHTML +=obj.nodeName.toLowerCase();
    			} else {
    				sHTML +=obj.nodeName;
    			}
    			sHTML += ">";
    		}
    	}
    	return sHTML;
    }
    </script>
    <div onclick="alert(Inner(this));">nana<div id="date1030" class="date"><span class="hts">1107790200/1107792000</span>10:30</div></div>
    Can you say overkill? I knew you could.


Bookmarks

Posting Permissions

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