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 Code:
<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"
.
Linear Mode
