Replacing content of DIV with arbitrary HTML markup

[Terry]

Hi,
Using javascript, I would like to replace the contents of a DIV with
new, arbitrary HTML markup. I want to write a W3C-compliant function
for doing so; it would look something like this:

function changeContents(divElement, htmlMarkup)
{
// divElement: an existing DIV object reference
// htmlMarkup: new HTML markup to replace whatever is there
}

Consider the following code:
<div id='Div1'><p>some <strong>important</strong> stuff</p></div>

If I called my function like so:
changeContents(document.getElementById('Div1'),'<h 1>Yay!</h1>');

the expect rendering would be:
<div id='Div1'><h1>Yay!</h1></div>

I've read many suggestions using nodes manipulation, but all of them
seemed to work only if you're just adding plain text -- not HTML tags.
In the latter case, I've seen suggestions to use createElement() which
is fine when you *know* exactly what you're adding... but what about a
function?

I hope I'm making sense here... Any ideas will be greatly appreciated,
Thanks!

[RobG]

Terry wrote:

Hi,
Using javascript, I would like to replace the contents of a DIV with
new, arbitrary HTML markup. I want to write a W3C-compliant function
for doing so; it would look something like this:

function changeContents(divElement, htmlMarkup)
{
// divElement: an existing DIV object reference
// htmlMarkup: new HTML markup to replace whatever is there
}
Sorry, W3C compliance is not possible.

The best solution is probably to use innerHTML. It has been widely if
inconsistently implemented and therefore has some foibles: you need to
be careful what you do.

One limitation is that you must not attempt to modify tables, though you
can modify cell content or create entire tables.

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp>

The Mozilla equivalent is createContextualFragment:

<URL:http://www.mozilla.org/docs/dom/domref/dom_range_ref26.html#1005287>

But it is not well supported outside Mozilla/Firefox/Netscape browsers
(if at all).

Consider the following code:
<div id='Div1'><p>some <strong>important</strong> stuff</p></div>

If I called my function like so:
changeContents(document.getElementById('Div1'),'<h 1>Yay!</h1>');

the expect rendering would be:
<div id='Div1'><h1>Yay!</h1></div>

Then changeContents might be:

function changeContents( el, markUp ) {
el.innerHTML = markUp;
}

But there is no error checking or recovery for bad markup.

[...]

--
Rob

[Terry]

Original :: RobG :: 2005-08-29 01:06

Terry wrote:

Hi,
Using javascript, I would like to replace the contents of a DIV with
new, arbitrary HTML markup. I want to write a W3C-compliant function
for doing so; it would look something like this:

function changeContents(divElement, htmlMarkup)
{
// divElement: an existing DIV object reference
// htmlMarkup: new HTML markup to replace whatever is there
}

Sorry, W3C compliance is not possible.

The best solution is probably to use innerHTML. It has been widely if
inconsistently implemented and therefore has some foibles: you need to
be careful what you do.

Thanks RobG.

The goal of the function was to implement HTML tooltips in a
single page. I ended up writing each tooltip as an
individual DIV containing all desired markup. Initially
invisible, the appropriate tooltip was repositioned and made
visible/invisible using the onmouseover/onmouseout events of
a span. Not exactly revolutionary but it gets the job done
-- and this can be further automated using server-side or
client-side embellishments, of course.