The insertAdjacentHTML and insertAdjacentText MethodsThe Internet Explorer insertAdjacentHTML and insertAdjacentText methods (see "The insertAdjacentHTML and insertAdjacentText Methods" in Chapter 6, "Using Core HTML Methods and Events," for their syntax) give you finer control over where the HTML you insert in pages goes than document.write provides. The insertAdjacentHTML method enables you to insert HTML next to an element that exists already, and the insertAdjacentText method enables you to insert text (which will not be treated as HTML, but just as plain text). You can determine where the new text or HTML will go with respect to the already existing element by passing the constants "BeforeBegin" , "AfterBegin" , "BeforeEnd" , or "AfterEnd" to insertAdjacentHTML and insertAdjacentText , as discussed in Chapter 6. These methods are useful to change web pages on-the-fly ; we've seen these methods in Chapter 6. Here's an example (it's Listing 6.11) that inserts text and a text field when the user clicks a button in the Internet Explorer: <HTML> <HEAD> <TITLE> Using the insertAdjacentHTML Method </TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function addMore() { div1.insertAdjacentHTML("afterEnd", "<P>Here is a new text field: <input type=text VALUE='Hello!'>"); } // --> </SCRIPT> </HEAD> <BODY> <H1>Using the insertAdjacentHTML Method</H1> <DIV ID="div1"> <INPUT TYPE=BUTTON VALUE="Click Me!" onclick="addMore()"> </DIV> </BODY> </HTML> You can see the results in Chapter 6, in Figure 6.6. |