The insertAdjacentHTML and insertAdjacentText Methods


The insertAdjacentHTML and insertAdjacentText Methods

The 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.



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net