14.14 Replacing Portions of Body Content
NN 6, IE 5
14.14.1 Problem
You want to replace content in the
document with dynamically generated content.
14.14.2 Solution
There are different tactics, depending on whether the content to be
replaced is simply the text content of an element or a series of HTML
elements. To replace all text content inside an element, create a
text node and replace the container's current child
node with the new one:
var txt = document.createTextNode("Every good boy does fine.");
var elem = document.getElementById("someElement");
var oldTxt = elem.replaceChild(txt, elem.firstChild);
When the element's current content contains both
text and interlaced elements (such as a paragraph element containing
a portion of text marked up as an em element),
delete each nested node prior to inserting the new content:
var txt = document.createTextNode("Every good boy does fine.");
var elem = document.getElementById("someElement");
while (elem.childNodes.length > 0) {
elem.removeChild(elem.firstChild);
}
elem.appendChild(txt);
To replace one child element with a newly created element, use the
replaceChild( ) method:
var newElem = document.createElement("span");
newElem.setAttribute("id", "newSpan");
var elem = document.getElementById("someElement");
elem.replaceChild(newElem, elem.firstChild);
For more complex content, especially content beginning or ending with
a text node, use the
DocumentFragment object as a temporary container of the
created document, and then insert or replace in the destination
element as needed (see Recipe 14.11).
14.14.3 Discussion
If you intend to replace just a portion of an existing text node, you
have a couple of options — the more sophisticated of which
entails text range objects, illustrated in Recipe 15.3. But for
simpler cases, you can use unsophisticated string parsing on the old
and new text. The basic sequence is to extract a copy of the
element's text node, whose
nodeValue property consists of the actual string.
Then use the JavaScript string replace( ) method
to put the new substring in place of the old. Next, reassign the text
to the nodeValue property of the text node in the
document tree. Here is a brief example, with some hardwired values,
that replaces the string "coming"
with "going":
var elem = document.getElementById("myP");
var srchText = /coming/g;
var replacement = "going";
var elemText = elem.firstChild.nodeValue.replace(srchText, replacement);
elem.firstChild.nodeValue = elemText;
If your design dictates knowing ahead of time that a particular
portion of an element's text will be replaced on a
regular basis, it is easier to surround that text in a
span element and use that container as a localizer
for the text to be swapped out. Similarly, if you design a page that
arrives with a portion of the page empty, in anticipation of scripts
filling in content upon loading or after user interaction, insert
empty elements in position. You can see examples of this in Recipe
14.6 and Recipe 14.7, where a tbody element is
pre-installed in a table element to act as a
receptor for table rows and cells created by functions triggered
after the page has loaded.
14.14.4 See Also
Recipe 14.9 for creating elements; Recipe 14.10 for creating text
content; Recipe 14.11 for more about the
DocumentFragment object; Recipe 1.7 for string
search and replace with regular expressions; Recipe 15.3 for using
text ranges for body text search-and-replace operations.
|