Free-Ed said:
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
