innerHTML rant

[CDarklock]

I'm building a graph viewer for a client. The graph is an image with the id "graph", contained in a div with the id "centerbox".


o=document.getElementById(d);
if(o)
{
o.src=k+"graph.php?range="+n+"&scope="+x;
}


When d is set to "graph", this works fine. However, I now need an ability to replace the graph with a statistics page, which is HTML and not an image. So I changed d to "centerbox", and did this instead:


o.innerHtml='<img src="'+k+'graph.php?range='+n+'&scope='+x+'">';


This doesn't work. I didn't know why. It looks like it should work. I didn't get any JavaScript errors. Turns out I need to do this:


o.innerHTML='<img src="'+k+'graph.php?range='+n+'&scope='+x+'">';


Now, maybe it's just me, but I tend to think that getElementById and innerHTML don't go together. If it's innerHTML, then it should be getElementByID; if it's getElementById, then it should be innerHtml.

Of course, this is JavaScript, so I suppose it sort of HAS to suck if it's going to live up to its parentage.

[phppete]

HTML is an acronym for HyperText Markup Language so why do you think it should be written as Html??? Sorry but in this case your logic is flawed and I don't see the point in bashing a language because it doesn't make sense to you when it does to everyone else ..lol.

Lets look at PHP, a great language but totally screwed:


array_push($array, "value");
in_array("value", $array);

isset($var,$var,$var); // multiple values allowed to act like $var && $var
empty($var); // single values only


now that makes no sense at all! I'm sure all languages have their own set of problems but JS isn't so bad when you get to know it well :)

[CDarklock]

HTML is an acronym for HyperText Markup Language so why do you think it should be written as Html???

Because of getElementById. If it is "Id", which it is, then it should be "Html". Which it is not. And if it is "HTML", which it is, then it should be "ID". Which it is not. Even though "ID" isn't an acronym, it is conventionally capitalised in written communication.

This is called "consistency". Consistency is as important as correctness. This lack of consistency led me to chase a nonexistent logic problem for two hours, because it didn't even produce an error message. Two other people in my office looked at my code and suggested that it was probably a bug in IE. Neither of them -- despite their background in DHTML -- noticed that it was supposed to be innerHTML and not innerHtml.

I suggest that when three developers look directly at the same problem and do not see it, the difficulty of seeing it requires some justification. I do not see any sensible justification for "innerHtml" not to work. I do not see any sensible justification for "getElementByID" not to work. These are things that developers may be reasonably expected to do in the course of their duties, and when they do not work, it will cost these developers time which costs their clients money.

This minor little stupidity in JavaScript cost my client close to $200 today. How much has it cost the clients of all the other developers who hit this problem? How much does it *need* to cost before it matters?

Sorry but in this case your logic is flawed and I don't see the point in bashing a language because it doesn't make sense to you when it does to everyone else ..lol.

Then let's look at XMLHttpRequest. HTTP stands for Hypertext Transfer Protocol. XML stands for eXtensible Markup Language. Shouldn't it be either XmlHttpRequest or XMLHTTPRequest? Wouldn't that make more sense? After all, Microsoft quite properly named it "XMLHTTP". How does "XMLHttpRequest" make more sense than that?

Lets look at PHP, a great language but totally screwed [...] now that makes no sense at all!

It does if you've ever written a compiler, which you clearly have not. The order in which you pass your parameters has distinct and well-known performance implications. The capitalisation of human-readable names, on the other hand, does not. (Not writing a compiler doesn't make you a bad person... it just makes you unqualified to criticise someone else's compiler.)

Furthermore, PHP did not have to pass a standards body. It doesn't take a rocket surgeon to figure out that "Id" and "HTML" don't match, so either "ID" or "Html" -- if not both -- should be added for consistency and ease of use. Why couldn't a standards body see that and account for it?

[phppete]

No I've never written a compiler, maybe I am a bad person... who knows!

The fact that three developers missed the problem simply means the three developers don't have that much experience with using innerHTML or DHTML for that matter.

I also don't see why the order of the args in PHP matters to the compiler, I'll let you know when I have written one, might be a while though, I have no plans to do so ATM.

At least next time, you will never forget this lesson ;)

[Randall]

It doesn't take a rocket surgeon Now that I think of it, getting hit in the head with a rocket could be the answer to all sorts of problems. :ytthink:

(And just for the record, I'm with ya on the Id/ID stuff. Case-sensitive languages have always struck me as Almost Utterly Pointless, but I suppose they had their reasons.)

Randall

[Deb]

[Mod Note]
Two posts removed... no value to the topic... simply arguing. Please keep the conflicts off of the public forums. And be kind to each other. Thanks. ;)

[Joseph]

I would tend to agree with phpPete on this one.

HTML == HyperText Markup Language, which is of course an Acronym.
Id == An abbreviation of Identification.

Acronyms are properly written in all upper-case, whereas abbreviations are commonly written capitalized. IMO, Javascript's naming of these objects/functions is correct, and makes perfect sense. :smile:

Then let's look at XMLHttpRequest. HTTP stands for Hypertext Transfer Protocol. XML stands for eXtensible Markup Language. Shouldn't it be either XmlHttpRequest or XMLHTTPRequest? Wouldn't that make more sense? After all, Microsoft quite properly named it "XMLHTTP". How does "XMLHttpRequest" make more sense than that?

I completely agree that XMLHttpRequest is clearly misnamed for consistency's sake... however it does *look* better than "XMLHTTPRequest". :dopey:

In the end though, Javascript developers can & will name things whatever they want, and we must adhere to that....:dunno:

[trojjer]

Yeah, I know how annoying it is too! :blah:

If you're really bothered about it, you could write your own "wrapper" function like this:


function _getByID(id) { // no qualms about a two-letter lowercase var-name, eh?
return document.getElementById(id); }


Also, this removes the need to type in the oft-forgotten document. part (surely I'm not the only person who's left it out whilst getting used to it?), which is kinda labour-saving, for when you're feeling lazy... ;) In fact, having just came up with that extremely simple (but relatively unnecessary) function now, I might just add it to one of my "common" .js function libraries.

You don't always have to put up with it! I wish you could use object.prototype on more objects though, to add your own functions as methods to native code, or emulate ones that aren't available in some browsers (like Array.push() and its friends). But if I'm not mistaken, its usage is limited, right?

PS: Hmm, I admit that I registered just now because this looks like a good place -- but why are the emoticons "blocky"/straightened? Looks kind-of ugly in comparison to the typical circular ones everyone else tends to use, lol; but I guess I'll get used to them.

[Randall]

PS: Hmm, I admit that I registered just now because this looks like a good place -- but why are the emoticons "blocky"/straightened? Looks kind-of ugly in comparison to the typical circular ones everyone else tends to use, lol; but I guess I'll get used to them. You could say that the smilies are a function of the local environment. Take a close look at the FutureQuest logo at the top of the page, or see this for a clearer view (http://www.visionquest.net/misc/imagepages/image77.php). :wink:

If you click on the More link you'll find some non-mutant smilies in there as well.

Randall

[Joseph]

PS: Hmm, I admit that I registered just now because this looks like a good place -- but why are the emoticons "blocky"/straightened? Looks kind-of ugly in comparison to the typical circular ones everyone else tends to use, lol; but I guess I'll get used to them.

See the FutureQuest logo in the upper left hand of the header? Most of our smilies have been reshaped to fit that outline shape (which is a sort of diamond shape actually). :wave::yeah: :welcome:

[Don]

Most of our smilies have been reshaped to fit that outline shape...Well, not yours. Perhaps you have not been assimilated yet. :qthurl:

[Joseph]

:QTpacman:.

[trojjer]

By the way, can anyone explain properly why element.innerHTML is such a "bad" property? I know it's proprietary in origin; but isn't it supported in more browsers these days, than the official Standards Compliant way? It's just a guess, that one, can anyone follow it up...?

I like most of the W3C DOM specifications, btw, and I'm trying to use them where I can -- but I don't like the idea of having to laboriously "Walk the DOM" whenever I just want to add a prefabricated HTML string. Even Firefox supports this, in Compliant mode no less; whereas in comparison, they infamously won't "give in" and implement the overly-abused (but equally missed?) tooltip text display that appears when you mouseover an image with alt-text.*

Besides, why can't the browser just insert the HTML into the document as if it was there in the first place? By that, I mean, if it's already structured HTML, shouldn't the parent/child structure of the "fragment" be known anyway, prior to insertion into the main DOM tree? The same applies to my expectations of the property, when it's used to retrieve content. Well, I'm going to see now, just in case.

I wonder if anyone's tested this before? Help me try it in different browsers, please; if it works as I think it should (crossed-fingers), the children of the first "DOM-made" DIV should be copied into a second container (which has a different ID of course, and is also derived from document.createElement -- it's a clone of the first DIV and its children). W3C DOM methods have their uses and I respect them -- but this will help prove how much we can "opt out" and rely on innerHTML if we want, to cut down on the nested looping or whatever may be necessary at the time, to determine what childNode we want, and all that...

Also, I want to know how far its abilities extend when using a mixed approach, as you can see:

<html><head><title>.innerHTML Property Test</title>
<script language="javascript"><!--
function makeAndCopy() {
var div1=document.createElement('div'); div1.id='div1';
var div2=div1.cloneNode(false); div2.id='div2';

div1.innerHTML='<p>div1</p><div class="child"><p>child</p><span class="descendant">descendant</span></div>';

// Into the DOM tree it goes:
document.body.appendChild(div1);

// You can read the className[s] of the children, as an example:
var childNode=div1.childNodes[1];
alert('The className of the DIV element childNode is: '+childNode.className);

// clone, edit, then add a new labelling paragraph:
var para=div1.firstChild.cloneNode(true);
para.firstChild.nodeValue='div2'; // not forgetting it's a textNode child
div2.appendChild(para);

// now to clone the child (and the descendant <span> -- parameter set to _true_) and put them into div2:
div2.appendChild(childNode.cloneNode(true));

document.body.appendChild(div2); }
//--></script>

<style type="text/css"><!--
div {text-align:center; width:200px; margin:20px; padding:14px; background-color:#369;}
div#div1 {border:2px blue solid;}
div#div2 {border:2px red solid;}
div p {color:white;}
.child {border:1px white solid; background-color:black; width:65%;}
.descendant {background-color:white;}
--></style></head>

<body onload="makeAndCopy();">
<p>[Dynamic Content Below]</p>
</body></html>

Well, it works fine in Firefox and IE6 (*trumpet flaring*, lol) -- anyone else? :)

* I don't know where I stand on that off-topic issue, really. Fair enough, more people should use the title attribute as a longer description, and keep alt-text as simple alternative textual representation, where needed... But the distinction often seems blurred to me, about where the "split" should be. lol, the debate is very heated and long-in-the-tooth by now, on the Mozilla bugtracker forums...

PS: Oh, right, so they've mostly been assimilated have they? Oh no... lol... "Resistance is Futile" :D

[Andilinks]

Meditating upon the FutureQuest logo (once you get past that fish skeleton thing) will put you in touch with your inner HTML...

[phppete]

For innerHTML info look here http://www.quirksmode.org/dom/innerhtml.html, its actually faster than the W3C method.

[kitchin]

Mr.QuirksMode (Peter-Paul Koch) also has a page with good DHTML writing function, which accounts for various browser quirks and explains them:
http://www.quirksmode.org/js/layerwrite.html
(Google "site:quirksmode.org searchterm" is how I search that xclnt site.)

[Randall]

once you get past that fish skeleton thing So I'm not the only one who sees that? Whew... I was afraid it was some sort of latent ichthyophobia on my part :safegrin:

Randall

[trojjer]

Ah yes, I'm also a regular browser of Quirksmode.org; I assumed PPK might've already done a writeup of it too... Thanks.

"Fish skeleton"?? Hmm...

[sheila]

So I'm not the only one who sees that? Whew...
Certainly not.

Crunchy Chris referred at least once to my associates as "The Dead Fish People". I always smack him when he says that. Well, or at least shoot him a deadly look.

[Terra]

once you get past that fish skeleton thing
LOL - well, ummmm, that certainly wasn't the intent... :ytrubeye:

It may also help by viewing the final logo design in black and white (Visio ==> GIF) before we colorized it for integration into our site design...
http://www.FutureQuest.net/images/FQuest_Logo_Final.gif

Here is a blast from the past that describes the motivation that went into our logo design:
http://www.aota.net/forums/showthread.php?postid=273#post273

--
Terra
--there were no fish harmed during the making of our logo--
FutureQuest

[Andilinks]

that certainly wasn't the intent... It may be just my own Rorschach test (latent ichthyophobia?) but my first impression was that of an angel fish. Since the ribs were visible and there were no other fish attributes the fish thing had to be unintentional. And once past that I too said 'Coooool,' realizing that this was indeed the path to my inner HTML. :kewl:

Andi

[Andilinks]

letssingit.com is rather persistant with its adware installs...

edit: It installed at least 12 items with over 100 traces, I don't recommend visiting this site. Pop music lyrics sites are notorius adware installers, also beware of duble.com.

[Terra]

Hrrrm, my filtering and pop-up blockers must have nuked the attempts...

Removing the link...

Thanks for the heads up!

--
Terra
--some fish heads are gonna roll!--
FutureQuest

[Randall]

It may be just my own Rorschach test (latent ichthyophobia?) but my first impression was that of an angel fish. I still get that sense, even from the black & white version. But maybe that's what makes it so cool. In Retrospect -- the top layer signifies Deb, while the bottom layer signifies myself So, is Terra's subconscious trying to tell us that Deb reminds him of a dead fish? :rasberry:

Sorry Terra, I know I shouldn't be making fun of your creation like that. Some of us just can't resist a fish skeleton joke. :winky: some fish heads are gonna roll! Do fish heads roll? They look too triangular for a proper head-rolling -- but then, I've never tried to roll one. Maybe Monty can answer that question? :fishing:

Randall

[CrunchyFrog]

Certainly not.

Crunchy Chris often refers to my associates as "The Dead Fish People". I always smack him when he says that. Well, or at least shoot him a deadly look.

I believe I'm being maligned. I don't recollect ever referring to the FQ folks as "Dead Fish People", though I have probably never spoken often of the logo as anything but the "Dead Fish Logo"...

Cool bit of logo history, now I'll think of it as the Bab5 shadow fish logo. :)

[Randall]

I believe I'm being maligned. And malingered too, I'll wager.

Randall

[sheila]

And malingered too, I'll wager.

Randall
Oh, c'mon now. Who are you going to believe? The husband or the wife? (tip: choose wisely)

Just to be absolutely above board, I changed:
"often refers"

to:
"refered at least once"

I don't recollect ever referring to the FQ folks as "Dead Fish People"...
Well, I know you are telling the truth, so I won't hold any of these accusations of malignment against you. :rasberry:

[Randall]

Oh, c'mon now. Who are you going to believe? The husband or the wife? (tip: choose wisely) I was planning to go with the dead fish, to tell the truth. :dunno:

Randall

[Andilinks]

Seems to be a death theme this evening...

[Randall]

Now, if some scientist can figure out how to revive a canned tuna, that would be impressive.

A can-shaped fish would roll really good. :winky:

Randall

[PaulKroll]

And that would be a plus for what reason, exactly? I ask only as a minion...

[Andilinks]

Maybe Randall would like a can shaped tuna that would roll, or maybe swim directly into the cans--which would bring the price down considerably. But canned tuna is already quite cheap compared to the fresh, fish shaped, variety.

'tis a puzzlement to me.

Andi

[Randall]

It was Terra (http://www.aota.net/forums/showthread.php?postid=135698#post135698) who brought up the subject of rolling fish heads. I'm just trying to be helpful. :dunno: Maybe Randall would like a can shaped tuna that would roll, or maybe swim directly into the cans--which would bring the price down considerably. I prefer pouch-shaped (http://starkist.com/products/creations.html) tuna, actually. I was just enjoying the lemon-pepper species this evening. :winky:

But pouches don't roll too good.

Randall

[trojjer]

Dam*, and I was expecting someone to challenge my position, or even say something along the lines of "innerHTML is eeeevvviiillll, I tell you! You must never, ever use it!" (I've seen a few of those types of people now... I prefer a compromise, as I said. I mean, I don't really see the need for everyone to switch to XHTML all of a sudden, tbh, if they're not going to use XML in their actual pages... I'm currently sticking with HTML 4.01 Strict; less inline <script> comment-escape shenanigans to worry about, and all that...).

But, alas, all I got was a few dead fish jokes. :D

PS: Anyone tried my page out in other browsers? I've uploaded it here, on my sixth month freebie account (hah, well, I wouldn't pay for Brinkster hosting...): http://asmodeon.brinkster.net/innerHTML.html

PPS: * Well, the four letter version was censored, ahem... :rolleyes:

[Randall]

But, alas, all I got was a few dead fish jokes. :D When a thread begins its life as knock-down brawl over capitalization (or the lack thereof), you really can't expect too much. Dead fish jokes might even qualify as a step up. :rasberry: Anyone tried my page out in other browsers? All I have handy at the moment are Firefox and IE6, so I have nothing new to add. But yes, it looks fine in both of them.

Aside from the occasional political free-for-all, the folks here aren't given to blood feuds -- and I don't think "innerHTML vs the DOM" is the sort of thing to a spark a riot.

But if you really want to get people worked up, ask a question about HTML email sometime. :wink:

Randall

[Andilinks]

Smash the evil tools of capitalization, workers of the world untie.

[trojjer]

Hang on, maybe you mean capitalism or capitalisation? :P lol...

(Just to see if my "proper" British "variant" of such a word will spark something off, hehe... :EG: )

[Andilinks]

I was mocking the fools who want to smash capitalism. I should also mock the German language which capitalizes every noun...

We own our American variants to Noah Webster who freed us of the "King's English" with methodical textbooks in the early nineteenth century.

I just wish I could be clever. :) ::: sigh :::

[Randall]

Just to see if my "proper" British "variant" of such a word will spark something off, hehe... That could be a capitol offense around here, but I'm not living in a capital so it's a moot point.

I have been known to uncapitalize on opportunas, the finned (Finnish?) relative of the common opportunity. Available in 6oz cans and pouch-shaped varieties at your finer supermarkets.

:ytshark:

Randall

[trojjer]

Ah, so we're back to the pouched fish mania again... :D

And yeah, it's as if the "Deutschvolk" raise their voice for every utterance of a noun... "Das ist der mighty Fernsehen!" -- mighty Television indeed.

[Randall]

Ah, so we're back to the pouched fish mania again... :D You can never have too many pouched Maniacs, whether they're germaine to the Conversation or not. (Knife-wielding maniacs go better with romaine.)

Fish with zippers would solve the whole packaging issue, frankly. "Das ist der mighty Fernsehen!" This is what I mean about case-sensitive languages. Try plugging that Fernsehen into an American English power outlet and see how far it gets you.

Randall

[Andilinks]

Fish with zippers would solve the whole packaging issue, frankly. This is why I support GM food, but why stop there? We need fish that will till the deep for us, the entire ocean as food processing plant. Big fish are just too busy eating little fish, give them seaweed lunches and they can harvest the little fish for us, with or without zippers. A bit like a sushi cattle drive.

Andi

[Randall]

We need fish that will till the deep for us, the entire ocean as food processing plant. I'm counting on you to tackle that challenge, actually -- after you finnish your hydroponic salad shooter, of course.

Randall

[Andilinks]

A Finnish salad shooter, great item for Christmas. We have too few appliances from Finland, and too few hydroponic salads...

Dolphins would make good fish farming overseers, they would prefer this to those suicide missions against Chinese submarines.