JavaScript Examples Bible - UserWorks Technologies

76 JavaScript Examples Bible: The Essential Companion to JavaScript Bible
insertAdjacentHTML(“location”, “HTMLtext”)
insertAdjacentText(“location”, “text”)
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 these
two methods. The example here demonstrates the result of employing both methods
in an attempt to add some HTML to the beginning of the myP element.
Begin by assigning a string of HTML code to the global variable a:
a = “Important News!”
Because this HTML is to go on the same line as the start of the myP paragraph, use
the afterBegin parameter for the insert method:
myP.insertAdjacentHTML(“afterBegin”, a)
Notice that there is no space after the exclamation mark of the inserted HTML.
But to prove that the inserted HTML is genuinely part of the document’s object
model, you can now insert the text of a space after the B element whose ID is myB:
myB.insertAdjacentText(“afterEnd”, “ “)
Each time you evaluate the preceding statement (by repeatedly clicking the
Evaluate button or pressing Enter with the cursor in the topmost field), an additional
space is added.
You should also see what happens when the string to be inserted with
insertAdjacentText() contains HTML tags. Reload The Evaluator and enter the
following two statements into the topmost field, evaluating each one in turn:
a = “Important News!”
myP.insertAdjacentText(“afterBegin”, a)
The HTML is not interpreted but is displayed as plain text. There is no object
named myB after executing this latest insert method.
insertBefore(newChildNodeObject[,
referenceChildNode])
elementObject.insertBefore()
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓