JavaScript And DHTML Cookbook [Electronic resources] نسخه متنی

14.11 Creating Mixed Element and Text Nodes

NN 6, IE 5(Mac)/6(Win)

14.11.1 Problem

You want to generate content that
consists of elements as well as text inside those elements.

14.11.2 Solution

Use the W3C DOM
DocumentFragment object as an arbitrary container while
assembling the content:

var frag, myEm, txt1, txt2;
frag = document.createDocumentFragment( );
myEm = document.createElement("em");
txt1 = document.createTextNode("very");
myEm .appendChild(txt1);
txt1 = document.createTextNode("I am ");
txt2 = document.createTextNode(" happy to see you.");
frag.appendChild(txt1);
frag.appendChild(myEm);
frag.appendChild(txt2);

At this point, the fragment (which starts and ends with text nodes)
is ready for insertion or replacement at any existing element node in
the document tree.

14.11.3 Discussion

Treat the DocumentFragment object like a scratch
pad capable of containing any well-formed sequence of node types. The
fragment exists solely in memory and is not a part of the document
tree.

Internet Explorer implements the DocumentFragment
object in Version 5 for the Macintosh and Version 6 or later for
Windows. For earlier versions of Internet Explorer, there is no
node-related equivalent. You can simulate the document fragment in
memory by assembling element and text nodes in any generic container
(such as a div or span). When
it's time to place the content into the document
tree, you can remove each child node of the temporary container, and
append the removed node into the document's
destination element. This is ugly, but possible.

Assembling mixed content, not as nodes but as strings, plays nicely
in the innerHTML property of all elements (in IE 4
or later and NN 6 or later). The equivalent of the node approach just
shown looks like the following:

var newContent = "I am <em>very</em> happy to see you.";

Then assign the new content to the innerHTML
property of the desired element, which replaces the existing content
with the new content.

The IE-only DOM equips elements with another method that assists
insertion of strings containing text with or without HTML markup that
is to be treated as renderable HTML. The insertAdjacentHTML(
) method (compatible back to IE 4) lets
you determine where the insertion goes in relation to the element.
The method takes two parameters. The first is a case-insensitive
string signifying the relative location of the insertion point for
the new content. Here are the four possible values for the first
parameter:

In front of the start tag of the current element

After the start tag, but immediately before any existing content of
the current element

At the very end of the content of the element, just in front of the
end tag

After the end tag of the current element, but before any subsequent
element

The new content is the second parameter. For example, to append the
HTML string created earlier to an existing element whose ID is
myP, the backward-compatible IE-only syntax is:

document.all("myP").insertAdjacentHTML("BeforeEnd", newContent);

Internet Explorer offers a large set of proprietary
content manipulation methods, shown in
Table 14-1.

contains(elemRef)

getAdjacentText(where)

insertAdjacentElement(where, elemRef)

insertAdjacentHTML(where, HTMLText)

insertAdjacentText(where, text)

removeNode(deep)

replaceAdjacentText(where, text)

replaceNode(newNodeRef)

swapNode(otherNodeRef)

14.11.4 See Also

Recipe 14.9 for creating a new element; Recipe 14.10 for creating a
new text node.