469,362 Members | 2,548 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,362 developers. It's quick & easy.

Replacing content of DIV with arbitrary HTML markup

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!

Aug 29 '05 #1
2 1776
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
Aug 29 '05 #2

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.
Aug 30 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

7 posts views Thread by Rob Meade | last post: by
1 post views Thread by Andrew Poulos | last post: by
7 posts views Thread by Wilhelm Kutting | last post: by
12 posts views Thread by Adam J. Schaff | last post: by
6 posts views Thread by tentstitcher | last post: by
6 posts views Thread by silverbob | last post: by
9 posts views Thread by pbd22 | last post: by
1 post views Thread by cma6 | last post: by
reply views Thread by zhoujie | last post: by
1 post views Thread by Marylou17 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.