Entry
How to read inner/outerHTML with NN6?
How to insert unparsed HTML with NN6?
How to set innerHTML with NN6?
Oct 9th, 2000 09:31
Martin Honnen,
DOM level 1 has no methods to allow for insertion of unparsed HTML into
the document tree (as IE allows with insertAdjacentHTML or assignment
to inner/outerHTML).
NN6 (currently in beta as NN6PR3) know supports the
.innerHTML
property of HTMLElements so that you can read or write the innerHTML of
a page element like in IE4+.
NN6 also provides a DOM level 2 compliant Range
object to which a
createContextualFragment('html source string')
was added to spare DOM scripters the task of parsing html and creating
DOM elements.
You create a Range with
var range = document.createRange();
Then you should set its start point to the element where you want to
insert the html for instance
var someElement = document.getElementById('elementID');
range.setStartAfter(someElement);
Then you create a document fragment from the html source to insert for
example
var docFrag =
range.createContextualFragment('<P>Kibology for all.</P>');
and insert it with DOM methods
someElement.appendChild(docFrag);
The Netscape JavaScript 1.5 version even provides so called setters for
properties which together with the ability to prototype the DOM
elements allows to emulate setting of outerHMTL for NN6:
<SCRIPT LANGUAGE="JavaScript1.5">
if (navigator.appName == 'Netscape') {
HTMLElement.prototype.outerHTML setter =
function (html) {
this.outerHTMLInput = html;
var range = this.ownerDocument.createRange();
range.setStartBefore(this);
var docFrag = range.createContextualFragment(html);
this.parentNode.replaceChild(docFrag, this);
}
}
</SCRIPT>
If you insert that script block you can then write cross browser code
assigning to
.innerHTML
.outerHTML
for instance
document.body.innerHTML = '<P>Scriptology for all</P>';
which works with both IE4/5 and NN6.
The following provides getter functions for
.outerHTML
to allow to read those properties in NN6 in a IE4/5 compatible way.
Note that while the scheme of traversing the document tree should point
you in the right direction the code example might not satisfy your
needs as there are subtle difficulties when trying to reproduce the
html source from the document tree. See for yourself whether you like
the result and improve it as needed to cover other exceptions than
those handled (for the empty elements and the textarea element).
<HTML>
<HEAD>
<STYLE>
</STYLE>
<SCRIPT LANGUAGE="JavaScript1.5">
var emptyElements = {
HR: true, BR: true, IMG: true, INPUT: true
};
var specialElements = {
TEXTAREA: true
};
HTMLElement.prototype.outerHTML getter = function () {
return getOuterHTML (this);
}
function getOuterHTML (node) {
var html = '';
switch (node.nodeType) {
case Node.ELEMENT_NODE:
html += '<';
html += node.nodeName;
if (!specialElements[node.nodeName]) {
for (var a = 0; a < node.attributes.length; a++)
html += ' ' + node.attributes[a].nodeName.toUpperCase() +
'="' + node.attributes[a].nodeValue + '"';
html += '>';
if (!emptyElements[node.nodeName]) {
html += node.innerHTML;
html += '<\/' + node.nodeName + '>';
}
}
else switch (node.nodeName) {
case 'TEXTAREA':
for (var a = 0; a < node.attributes.length; a++)
if (node.attributes[a].nodeName.toLowerCase() != 'value')
html += ' ' + node.attributes[a].nodeName.toUpperCase() +
'="' + node.attributes[a].nodeValue + '"';
else
var content = node.attributes[a].nodeValue;
html += '>';
html += content;
html += '<\/' + node.nodeName + '>';
break;
}
break;
case Node.TEXT_NODE:
html += node.nodeValue;
break;
case Node.COMMENT_NODE:
html += '<!' + '--' + node.nodeValue + '--' + '>';
break;
}
return html;
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript: alert(document.documentElement.outerHTML); void 0">
show document.documentElement.outerHTML
</A>
|
<A HREF="javascript: alert(document.body.outerHTML); void 0">
show document.body.outerHTML
</A>
|
<A HREF="javascript: alert(document.documentElement.innerHTML); void 0">
show document.documentElement.innerHTML
</A>
|
<A HREF="javascript: alert(document.body.innerHTML); void 0">
show document.body.innerHTML
</A>
<FORM NAME="formName">
<TEXTAREA NAME="aTextArea" ROWS="5" COLS="20">
JavaScript.FAQTs.com
Kibology for all.
</TEXTAREA>
</FORM>
<DIV>
<P>
JavaScript.FAQTs.com
</P>
<BLOCKQUOTE>
Kibology for all.
<BR>
All for Kibology.
</BLOCKQUOTE>
</DIV>
</BODY>
</HTML>
Note that the getter/setter feature is experimental and its syntax is
subject to change.
