DOM:: innerHTML

[Grok]

Why does innerHTML append a space when there is none in reality?

<li id="li_debug">ExtraSpace</li>

<SCRIPT language="javascript">
   alert('innerHTML is (' + document.getElementById('li_debug').innerHTML + ')');
</SCRIPT>

This seriously messes with my ability in dynamic HTML if I depend on the innerHTML to locate elements.

[MyndFyre]

Why does innerHTML append a space when there is none in reality?

<li id="li_debug">ExtraSpace</li>

<SCRIPT language="javascript">
   alert('innerHTML is (' + document.getElementById('li_debug').innerHTML + ')');
</SCRIPT>

This seriously messes with my ability in dynamic HTML if I depend on the innerHTML to locate elements.

So just create a trim() function (I checked, there isn't an implicit one on String types).  It wouldn't be hard.

[Grok]

Edit:  Still broken.  InnerHTML and InnerText both show the extra character.

[Grok]

Hmm JavaScript has much more ability than I had known.

[Grok]

Ended up writing a trim function from regular expressions.

     function trim(e) {
         return e.replace(/(^\s*)|(\s*$)/g, "");
     }

The regex expression was in an MSDN example showing how to add a trim method to your own object.

[Banana fanna fo fanna]

innerHTML is bad. Don't use it if you can avoid it.

[Grok]

innerHTML is bad. Don't use it if you can avoid it.

Explain?

And answer this please.  Can't find it in my Wrox Professional HTML 4.01 Reference.

#include "/js/MyLibrary.js"

Do I use <link> to get server to include my javascript function library?  Or what?

[Banana fanna fo fanna]

Code Select Expand


<script src="bleh.js"></script>

innerHTML isn't standard in every DOM implementation...I think.

[MyndFyre]

No it's not; innerHTML is part of the Internet Explorer DOM.  The Netscape's document.layers model does not have something like that (well I'm sure it does, but I can't remember).

If you remember the property, you can use function prototyping for the same effect.  It's been a long time, but in dealing with reality, I've never really worried about making it cross-browser friendly.  I looked at my site statistics to discover that 99.5% of my site's hits were IE (the one right now that uses ImageReady cross-platform JS for image rollovers).

Remember though, you can get away with different code type for different browsers:

Code Select Expand


var ns4 = ie4 = other = false;
if (document.layers) {
 ns4 = true;
} else if (document.all)
 ie4 = true;
} else {
 other = true;
}

if (ns4) {
 // do netscape-compatible junk
} else if (ie4) {
 // do microshaft stuff
} else {
 // say "I suck cuz I don't use a standard browser!
}


IIRC, document.layers isn't a part of the Mozilla spec, either.