Awesome tiny JavaScript to replicate innerHTML for Mozilla : 5ubliminal's TellinYa

<a href="http://www.tellinya.com/art2/350/">Awesome tiny JavaScript to replicate innerHTML for Mozilla : 5ubliminal's TellinYa</a>

Must Reads: Web Scraping | Link Farming | Code Snippets | SEO Freeware

Subscribe to new by RSS!

I've been so busy these days…

… I had no time to post. Been doing a programming marathon to get some stuff done and had little to no time for other stuff. On my ventures to write better, faster code and sites I came to notice that Mozilla has no idea what innerHTML is. I hate FireFox. I use Opera:)

As my JavaScript skills are a bit rusty, I did some research and found this awesome piece of JS code that extends the DOM to accept the properties I needed: innerHTML and outterHTML.

The best part is that this is a DOM extender. So you can use:

getElementById('ID').innerHTML='HTML Encoded innerHtml';

I'm sure you'll find great use for these code snippets.

The JavaScript code:

I pasted the snippets here just in case that page fades away due to the high traffic I will send them with this post:)

HTMLElement.prototype.innerHTML setter = function (str) {
   var r = this.ownerDocument.createRange();
   r.selectNodeContents(this);
   r.deleteContents();
   var df = r.createContextualFragment(str);
   this.appendChild(df);
   return str;
}
HTMLElement.prototype.outerHTML setter = function (str) {
   var r = this.ownerDocument.createRange();
   r.setStartBefore(this);
   var df = r.createContextualFragment(str);
   this.parentNode.replaceChild(df, this);
   return str;
}
HTMLElement.prototype.innerHTML getter = function () {
   return getInnerHTML(this);
}
HTMLElement.prototype.outerHTML getter = function () {
   return getOuterHTML(this)
}

Over and out for now. I'm overdue with some email replies and I'll send them by the weekend.

6 Comments Posted By Readers :

Add your comment

#1 Papa Rage

Posted on Thursday, 08 May, 2008

Hmm... I use .innerHTML all the time without trouble. A search for it in one of my current projects turns it up 39 times. And it has been thoroughly tested in IE6, IE7, and FF2 over the course of more than a year.

#2 5ubliminal web

Posted on Thursday, 08 May, 2008

I have the latest FF and didn't work. I actually used innerText and it didn't work so I read on some forums these don't work on Mozilla as other were ranting about it too.
And found this script.

The truth is I didn't even try innerHTML. I only needed innerText.
If it works for you in FF … that's weird.

#3 Practicality

Posted on Thursday, 08 May, 2008

I know you said you don't use JS much, but seriously, if you really want to get anything done with more than one browser, use a JavaScript library. The JavaScript language itself takes way too much time to get anything done because you have to keep finding code snippets like this to get it to work in different browsers.

Just use a library and let someone else figure out the annoying details for you. For example, in jQuery your code (getElementById('ID').innerHTML='HTML Encoded innerHtml';) becomes: $("ID").html('HTML Encoded innerHtml');

And if you wanted innerText, you can just use text() instead of html(). Not only do you have less lines of code and less verbose code, but it always works.

Always working is probably the best part.

#4 Sukebe

Posted on Thursday, 08 May, 2008

innerText is not supported by FF yet, but innerHTML should work fine (ok, almost fine) everywhere.
I've used innerHTML in numerous projects and encountered problem only ones (don't really remember what browser was causing troubles - IE, FF or Opera).

Btw, PPK have nice compatibility tables and test page for innerHTML and innerText properties:
http://www.quirksmode.org/dom/w3c_html.html

#5 5ubliminal web

Posted on Thursday, 08 May, 2008

@Practicality:
I never had the time to dig deeper in such libraries. I got several JS thick book standing in line right now but didn't have the time for them yet.
I like to understand the code I use. It's hard for me to completely rely on others' code as this is what I do and I like to have complete control over it.
During time, I've come to understand that, instead of using others' code (and learn how it works) it was easier to write my own. And I always did that.

It's one of my… issues:)
PS: But I think I'll look into one of the JS libs. No time to learn JS properly right now. Not that I'm a total noob:) I don't know as much as I want/need to.

#6 5ubliminal web

Posted on Thursday, 08 May, 2008

@Sukebe:
Thanks for the link. Been on that site a while ago but never paid much attention to it.

Post Feedback

5ubliminal's TellinYa^.com SEO & SEM Blog © 2007 - All rights reserved unless mentioned otherwise .

Rendered On : [Thursday, 22 May, 2008 - 19:54:53 GMT] No Ajax / Flash Used Here

No Ajax / Flash Used Here

" Awesome tiny JavaScript to replicate innerHTML for Mozilla : 5ubliminal's TellinYa "