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.