Dynamically changing HTML within a DIV?

[Free-Ed, Ltd.]

I am going nuts trying to find a paragraph in a book that described how to
change the text content (HTML) in a DIV.

Actually I have an array of HTML strings that I want to drop into the DIV,
depending on button clicks, etc.

Putting this stuff into TEXTAREA and TEXT is simple, but I want to be able
to mix font families, weights, sizes, and stuff like that.

Thanks for your help.

DaveH

[Evertjan.]

Free-Ed, Ltd. wrote on 28 aug 2003 in comp.lang.javascript:

I am going nuts trying to find a paragraph in a book that described
how to change the text content (HTML) in a DIV.

Actually I have an array of HTML strings that I want to drop into the
DIV, depending on button clicks, etc.

Putting this stuff into TEXTAREA and TEXT is simple, but I want to be
able to mix font families, weights, sizes, and stuff like that.

<script type="text/javascript">
t1="<p style='color:red;'>hi<\/p>"
t2="<p style='color:green;'>there<\/p>"
</script>

<button onclick=div1.innerHTML=t1>t1</button>
<button onclick=div1.innerHTML=t2>t2</button>

<div id="div1"></div>

IE6 tested

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[David Dorward]

Free-Ed, Ltd. wrote:

I am going nuts trying to find a paragraph in a book that described how to
change the text content (HTML) in a DIV.

http://www.oreillynet.com/pub/a/java.../17/DOM-2.html
http://www.oreillynet.com/pub/a/java.../07/DOM-2.html

--
David Dorward http://dorward.me.uk/

[David Dorward]

Evertjan. wrote:

<button onclick=div1.innerHTML=t1>t1</button>
<button onclick=div1.innerHTML=t2>t2</button>

<div id="div1"></div>

IE6 tested

Mozilla 1.4 (i.e. Netscape 7.1) - failed
Opera 7.11 - failed
--
David Dorward http://dorward.me.uk/

[Evertjan.]

David Dorward wrote on 28 aug 2003 in comp.lang.javascript:

Evertjan. wrote:

<button onclick=div1.innerHTML=t1>t1</button>
<button onclick=div1.innerHTML=t2>t2</button>

<div id="div1"></div>

IE6 tested

Mozilla 1.4 (i.e. Netscape 7.1) - failed
Opera 7.11 - failed

So only 98% of the worlds users can use it yet.

What do you want ? A push in the right direction or a ready made answer.

I did not test for those minority browsers.

perhaps:

<button
onclick=document.getElementById("div1").innerHTML= t1>
t1</button>

will do the trick.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Lasse Reichstein Nielsen]

"Free-Ed, Ltd." <da***@free-ed.net> writes:

I am going nuts trying to find a paragraph in a book that described how to
change the text content (HTML) in a DIV.
There are several ways.
Actually I have an array of HTML strings that I want to drop into the DIV,
depending on button clicks, etc. Putting this stuff into TEXTAREA and TEXT is simple, but I want to be able
to mix font families, weights, sizes, and stuff like that.

You want to change the document structure dynamically.
This already rules out Netscape 4, Opera 6, and other older browsers,
where you cannot change the document structure.

There are several ways to do what you want. Here are three, with each
their problems and limitiations, including browser support.

innerHTML
---------
One solution, widely used, is the non-standard "innerHTML" property.
It was introduced by Microsoft, but is available in both Mozilla and
Opera 7 (probably because it was in widespread use before a DOM changes
were standardized).

To use innerHTML, you can simply write:

document.getElementById('divId').innerHTML =
"<div id='foo'>new <em>content</em>, yey!</div>";

The HTML is parsed an added as new child nodes of the div node. There
are some places where innerHTML is not so good, typically where the
contents are not HTML. In IE, e.g., the structure of a table is
read-only using innerHTML. That is, for these elements, innerHTML is a
read-only property:
COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD,
TITLE, TR
<URL:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/dhtml_node_entry.asp>

In Mozilla, using innerHTML on a textarea has the sideeffect of adding
child nodes to it, which is possibly a bug (but since there is no
formal definition of innerHTML, it is hard to say).

The biggest problem with innerHTML is that there is no standard
governing it, so new browsers may chose not to support it. It is
unlikely, as the world looks today, but who know when that might
change.

DOM node creation
-----------------
Instead of having your Javascript create a string and then parse
it to DOM nodes, you can use standard DOM function to create the
structure directly.

Example:

var div = document.getElementById("divId");
// clear previous content:
while (div.hasChildNodes()) {
div.removeChild(div.lastChild);
}
// create and add new content:
var foo = document.createElement("div");
foo.id = "foo";
foo.appendChild(document.createTextNode("new "));
var em = document.createElement("em");
em.appendChild(document.createTextNode("content")) ;
foo.appendChild(em);
foo.appendChild(document.createTextNode(", yey!"));
div.appendChild(foo);

DOM node creation is standardized, so there is reason to believe
that new browsers will support it.

It also requires large amounts of code, and is therefore more
errorprone (more code = more bugs), and it is hard to see what
is really happening.

I usually have some simpler functions as interface, so the above would
become

var div = document.getElementById("divId");
clearContent(div);
var foo =
create("div",["id","foo"], text("new "),
create("em",text("content)"),
text(", yey!"));
div.appendChild(foo);

but it is still a hassle compared to just writing HTML.
Moving DOM nodes
----------------

The third possibility combines the advantages of both of the previous
ones, but restricts you to a fixed, predefined set of contents.

You create the HTML directly in your HTML file, and then use DOM
methods to move them around.

E.g., HTML:
<div id="hiddenWrapper" style="display:none">
<div id="foo">new <em>content</em>, yey!</div>
</div>
and code:
var div = document.getElementById("divId");
var wrapper = document.getElementById("hiddenWrapper");
// store content of div
while (div.hasChildNodes()) {
wrapper.appendChild(div.lastChild);
}
// insert new content
div.appendChild(document.getElementById("foo"));

As I said above, this requires you to have created all the possible
values you want to insert in advance. If you can do that, it works fine.
Otherwise, you will have to use one of the other methods, where you
can create new DOM trees truely dynamically.
Good luck
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Lasse Reichstein Nielsen]

"Evertjan." <ex**************@interxnl.net> writes:

So only 98% of the worlds users can use it yet.
While statistics disagree on how many people use each browser, I have
not seen one that claimed 98% IE browsers recently.
What do you want ? A push in the right direction or a ready made answer.
I don't care, as long the reader knows which it is. I take it, it was
meant as a push.
I did not test for those minority browsers.
No need to test each time. That method of coding is well known not to
work in anything but IE, and is considered bad conding practice by
many of the readers of this group, for that exact reason.
<button
onclick=document.getElementById("div1").innerHTML= t1>
t1</button>

will do the trick.

Yes. It is still illegal HTML since the value isn't quoted.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Evertjan.]

Lasse Reichstein Nielsen wrote on 28 aug 2003 in comp.lang.javascript:

<button
onclick=document.getElementById("div1").innerHTML= t1>
t1</button>

will do the trick.

Yes. It is still illegal HTML since the value isn't quoted.

my mistake, sorry:

<button
onclick="document.getElementById('div1').innerHTML =t1">
t1</button>

So what is the scope of the <button> button ?
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Lasse Reichstein Nielsen]

"Evertjan." <ex**************@interxnl.net> writes:

<button
onclick="document.getElementById('div1').innerHTML =t1">
t1</button>

So what is the scope of the <button> button ?

I am not sure what you mean by the scope of the button.

The variables that are available to the event handler (as if wrapped
in a "with" construct) are (if I remember correctly):
the global variables (properties of the global object)
the properties of the document object
the properties of the form elemen, if the button is inside a form
the properties of the button element itself.

And for the record, I would add "type='button'" to the button tag.
The default type is "submit".
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
Art D'HTML: <URL:http://www.infimum.dk/HTML/randomArtSplit.html>
'Faith without judgement merely degrades the spirit divine.'

[Evertjan.]

Lasse Reichstein Nielsen wrote on 28 aug 2003 in comp.lang.javascript:

So what is the scope of the <button> button ?

I am not sure what you mean by the scope of the button.

Sorry, I ment scope in the sense of
"which browsers do [not] support <button>..</button>" ?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Joe Kelsey]

Lasse Reichstein Nielsen <lr*@hotpop.com> wrote in message news:<k7**********@hotpop.com>...

I usually have some simpler functions as interface, so the above would
become

var div = document.getElementById("divId");
clearContent(div);
var foo =
create("div",["id","foo"], text("new "),
create("em",text("content)"),
text(", yey!"));
div.appendChild(foo);

Does this perform the work of create as hinted above?

function create ()
{
var argv = create.arguments;
var argc = argv.length;
var child;
var i;
var j;

var node = document.createElement (argv[0]);
for (i = 1; i < argc; ++i)
{
child = argv[i];
if (child.prototype.constructor == Array)
{
for (j = 0; j < child.length; j += 2)
{
node[child[j]] = child[j+1];
}
}
else
{
node.appendChild (child);
}
}
return node;
}

Example use:

var inp = create ("input",
["type", "text", "size", "30",
"value", "default value"]);

Note that it doesn't fit all my criteria for a single function to
create input nodes. I cannot set an "onchange" element that depends
on the node itself, for instance using a closure that depends on
passing inp.value to the updateList function as a parameter:

function onchangeUpdateList (obj, name)
{
return function () { return updateList (ofrm.list_list.value,
obj.value, name); };
}