JavaScript Examples Bible - UserWorks Technologies

Chapter 5 ✦ Body Text Objects (Chapter 19)
To inspect the object returned by the parentElement() method, enter the following
statement in the lower text box:
a.parentElement()
If you scroll down to the outerHTML property, you see that the parent of the text
range is the myEM element, tag and all.
Next, extend the end point of the text range by one word:
a.moveEnd(“word”)
Because part of the text range now contains text of the myP object, the outerHTML
property of a.parentElement() shows the entire myP element and tags.
pasteHTML(“HTMLText”)
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) to experiment with the
pasteHTML() method. The goal of the following sequence is to change the tag
to a tag whose STYLE attribute sets the color of the original text that was in
the EM element.
Begin by creating the text range and setting the boundaries to the myEM element:
a = document.body.createTextRange()
a.moveToElementText(myEM)
While you can pass the HTML string directly as a parameter to pasteHTML(), storing
the HTML string in its own temporary variable may be more convenient (and
more easily testable), such as:
b = “” + a.text + “”
Notice that we concatenate the text of the current text range, because it has not
yet been modified. Now we can paste the new HTML string into the current text
range
a.pasteHTML(b)
At this point the EM element is gone from the object model, and the SPAN element
is in its place. Prove it to yourself by looking at the HTML for the myP element:
myP.innerHTML
As noted earlier, the pasteHTML() method is not the only way to insert or
replace HTML in a document. This method makes excellent sense when the
user selects some text in the document to be replaced, because you can use the
document.selection.createRange() method to get the text range for the selection.
But if you’re not using text ranges for other related operations, consider the
other generic object properties and methods available to you.
313
TextRange.pasteHTML()