HTML to DOM Function?

[john.teixeira]

Hey all,

Sorry if this is a newbie question, but does javascript have a built-in
function that will take a string, parse any HTML tags from the string
and return back a DOM element representing the root of the HTML tree
represented by the string? For example is I called
HTML2DOM('<strong>foo</strong>''), it would return the 'strong' element
with one text element child with the value of 'foo'.

Thanks,
-John

 

[RobG]

Hey all,

Sorry if this is a newbie question, but does javascript have a built-in
function that will take a string, parse any HTML tags from the string

If you mean ECMAScript, no. However Microsoft introduced innerHTML some
time ago (with IE 4) and it has been widely copied. You can create DOM
elements from an HTML string by setting an existing element's innerHTML to
the string.

and return back a DOM element representing the root of the HTML tree
represented by the string?

No, not even innerHTML will do that. It is a property of an element, so
you have to set the innerHTML of some existing element or create a new
element and set its innerHTML property.

The W3C DOM includes documentFragment, but for the browsers I tested
(Firefox) you can't set it's innerHTML property.

For example is I called
HTML2DOM('<strong>foo</strong>''), it would return the 'strong' element
with one text element child with the value of 'foo'.

Use:

var strongEl = document.createElement('strong');
strongEl.appendChild(document.createTextNode('foo'));


You could probably create your own function that creates a div element,
sets its innerHTML property, replaces the div with a document fragment
(i.e. attach all the child nodes of the div to the fragment in the correct
order) then returns a reference to the fragment.

Something like (untested):

function toDOM(HTMLstring)
{
var d = document.createElement('div');
d.innerHTML = HTMLstring;
var docFrag = document.createDocumentFragment();
for (var i=0, len=d.childNodes.length; i<len; ++i){
docFrag.appendChild(d.childNodes);
}
return docFrag;
}

innerHTML is not supported consistently in all browsers and feature
detection is difficult. Errors in the HTML string or invalid markup will
cause unpredictable results in different browsers.

 

[RobG]

RobG said on 30/03/2006 7:33 AM AEST:

Hey all,

Sorry if this is a newbie question, but does javascript have a built-in
function that will take a string, parse any HTML tags from the string

[...]


You could probably create your own function that creates a div element,
sets its innerHTML property, replaces the div with a document fragment
(i.e. attach all the child nodes of the div to the fragment in the
correct order) then returns a reference to the fragment.

Something like (untested):

function toDOM(HTMLstring)
{
var d = document.createElement('div');
d.innerHTML = HTMLstring;
var docFrag = document.createDocumentFragment();
for (var i=0, len=d.childNodes.length; i<len; ++i){
docFrag.appendChild(d.childNodes);
}
return docFrag;
}

Doesn't work. Somehow the stuff added by innerHTML isn't recognised as
DOM objects and so can't be transferred to another element even if the
div is added to the document before modifying its innerHTML property.

The same process works fine if you use DOM methods to create the
elements rather than innerHTML.

There are likely work-arounds, but none of the ones I can think of are
appealing.

 

[RobG]

RobG said on 30/03/2006 9:59 AM AEST:

RobG said on 30/03/2006 7:33 AM AEST: [...]

Something like (untested):

function toDOM(HTMLstring)
{
var d = document.createElement('div');
d.innerHTML = HTMLstring;
var docFrag = document.createDocumentFragment();
for (var i=0, len=d.childNodes.length; i<len; ++i){
docFrag.appendChild(d.childNodes);
}
return docFrag;
}

Doesn't work.

I'm an idiot - of course it doesn't work, the childNodes collection is
'live' but my counter (len) isn't. This version *does* work in Firefox
& IE:

function toDOM(HTMLstring)
{
var d = document.createElement('div');
d.innerHTML = HTMLstring;
var docFrag = document.createDocumentFragment();

while (d.firstChild) {
docFrag.appendChild(d.firstChild)
};

return docFrag;
}


Here is a fuller function that makes use of the Gecko range interface
extensions if available:

function toDOM(HTMLstring)
{
var docBody = document.body || document.documentElement;
if (!docBody) return;

if (document.createRange && (rangeObj = document.createRange())){
var docFrag, rangeObj;
rangeObj.selectNode(docBody);

if ( rangeObj
&& rangeObj.createContextualFragment
&& (docFrag = rangeObj.createContextualFragment(HTMLstring))){
return docFrag;
}
} else if (
'string' == typeof docBody.innerHTML
&& document.createElement
&& document.createDocumentFragment){
var div = document.createElement('div');
var docFrag = document.createDocumentFragment();
div.innerHTML = HTMLstring;

while (div.firstChild){
docFrag.appendChild(div.firstChild)
};

return docFrag;
}

return null;
}


To do far more extensive document generation from XML, try XML for <SCRIPT>:

<URL:http://xmljs.sourceforge.net/index.html>

 

[Martin Honnen]

Here is a fuller function that makes use of the Gecko range interface
extensions if available:

But your check for that feature needs improvement, document.createRange
is part of the W3C DOM Level 2 Range API which for instance Opera 8
implements besides Gecko. However Opera 8 does not implement the
proprietary Mozilla extension createContextualFragment meaning the way
you have set up your checks below causes Opera to return null from the
function while it could well execute the div.innerHTML branch if you
checks allowed it to get there:

function toDOM(HTMLstring)
{
var docBody = document.body || document.documentElement;
if (!docBody) return;

if (document.createRange && (rangeObj = document.createRange())){

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Yields true in Opera 8.

var docFrag, rangeObj;
rangeObj.selectNode(docBody);

if ( rangeObj
&& rangeObj.createContextualFragment

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Yields false in Opera 8.

 

[RobG]

But your check for that feature needs improvement, document.createRange
is part of the W3C DOM Level 2 Range API which for instance Opera 8
implements besides Gecko. However Opera 8 does not implement the
proprietary Mozilla extension createContextualFragment meaning the way
you have set up your checks below causes Opera to return null from the
function while it could well execute the div.innerHTML branch if you
checks allowed it to get there:

Thanks, actually the 'else' is redundant anyway, removing it allows Opera
and similar browsers to fall through to the innerHTML version.

I would probably only use the shorter innerHTML-only method anyway.

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Yields true in Opera 8.


^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Yields false in Opera 8.

Remove the 'else' and just use 'if', since if the above if loop is executed
the function will return from there anyway:

}
if (
[...]

I only included the range stuff as a bit of an experiment.