With Dynamic HTML, you can now make changes to the content of a page without reloading the page from the server. There are two basic techniques you can use: change the contents of a specific element, or create a text range and change the text in the range. Almost all changes can be made by changing the contents of an element; only advanced manipulation requires using a text range. When you make a change to page content, the page re-flows to fit whatever you changed (such as a larger graphic, or more/less text, etc.). You can change plain text, or the underlying HTML. In plain English, that means you can change anything you want on the Web page at any time, on the fly.

Changing Text
Changing HTML
The Text Range
Searching
The Finer Points Explained

© 1997 Microsoft Corporation. All rights reserved. Terms of use.


You can change the text of any page element. One way to do this is to refer to the object in an in-line event handler: this.innerText = "new text". Another way to do this in a script is to create an ID for the element, and then reference the element's properties using the ID. For example, suppose you had some text on the page that was bold, and you gave it an ID of "myBoldText." You could then use the innerText and outerText properties, and the insertAdjacentText methods to change the contents of the element: myBoldText.innerText = "How about that!" innerText replaces whatever HTML code is between the starting and ending tags of the element. With outerHTML, you can replace everything, including the outer tags. With insertAdjacentHTML, you can add text before the beginning of the start tag (beforeBegin), after the start tag (afterBegin), before the end tag (beforeEnd), or after the end tag (afterEnd).

A textRange can point to any portion of the text on a page. Think of text in the broadest possible sense, including all of the HTML tags on the page. This allows you to change an image by changing the HTML tag for the image. You can create a textRange that includes a specific character count, the text between tags, etc. The basic technique is to create an empty range, and to then move it, or move the start and end positions, to select exactly the text you want in the range.

You can also create a text range by searching for a string of text. This could be some text that the user entered in a form, pre-defined text, or any other text that is on the page. Once the search is complete, the text range consists of the text you searched for, if it was found. Further searches continue in the same direction. If the search text is not found, the text range returned is a null object. You can also locate text in specific elements on the page, or find the text at a point on the page where the user clicks.

Just as you can replace text in a range, you can also replace HTML tags. You can remove tags, add news tags, or change the contents of existing tags. As with changing text, you can change innerHTML and outerHTML properties, or use insertAdjacentHTML to add text to an existing element. With innerHTML, you can replace whatever HTML code is between the starting and ending tags of the element. With outerHTML, you can replace everything, including the outer tags. Use insertAdjacentHTML to add text before the beginning of the start tag (beforeBegin), after the start tag (afterBegin), before the end tag (beforeEnd), or after the end tag (afterEnd).

The dynamic content methods inner[HTML|Text], outer[HTML|Text} and insertAdjacent[HTML|Text], although declared for all elements, are restricted. They can only modify parts of the document which are textually based. In other words, your ability to use these methods depends on the location you use them. In general, one can perform an insertAdjacent[HTML|Text] ( [ "BeforeBegin" | "AfterEnd" ] ) where an outer[HTML|Text] can be performed, and an insertAdjacent[HTML|Text] ( [ "AfterBegin" | "BeforeEnd" ] ) where inner[HTML|Text] can be performed. In addition, when doing an HTML-based inner, outer, or adjacent, the source and target HTML may limit you. Note: You cannot modify the structure of a table. This includes adding or removing rows or cells. You can, however, replace the entire table.

Here is a sentence with bold text in a SPAN with the ID of myBoldText.

You can change the inner and outer text using code like the lines shown below. Pass your mouse cursor over the sample lines of code to see how they work. When you replace innerText, the <B> and </B> tags remain. If you replace outerText, the <B> and </B> tags go away.

   Original HTML source looks like: <B ID=myBoldText>bold text</B>
Replacement HTML source looks like: 

 

myBoldText.innerText = "<I>italic text</I>"

myBoldText.outerText = "<I>italic text</I>"

myBoldText.insertAdjacentText "beforeBegin", "<I>italic text</I> "

The createTextRange() method is exposed for the body element object, the textarea element object, the button element object, and the input text edit object. You can create a text range only on these elements. As a general rule, you'll find yourself using the innerText and outerText methods whenever possible. They are easier to use, but when you really need some serious text manipulation, text ranges are very handy. See the search example for more information.

' VBScript
Dim rDoc
Set rDoc = document.body.createTextRange()

// Javascript
var rDoc=document.body.createTextRange();

The move method allows the start position of the range to be changed. Using the move method causes the range to collapse to the start position, and the position is moved the specified number of units. The new range is empty.

<BODY>
	<P>This is an <I>example</I> of some text</P>
</BODY>
Dim r
Set r = document.body.createTextRange()
r.move("Word",1)
' The range now is an empty range immediately before the word 'is'.

The moveStart and moveEnd methods resize an existing range. By specifying units of movement, you can select just about any text on the page. For example:

<BODY>
	<P>This is an <I>example</I> of some text</P>
</BODY>

Dim r 
Set r = document.body.createTextRange()
r.moveEnd("Word",3)	' The range now contains 'This is an'
r.moveStart("Word",1)	' The range now contains 'is an'
r.moveEnd("Character",-1)	' The range now contains 'is a'

The findText method searches the textRange for a specific instance of the string that is passed with this method. This method positions the start and end positions of the textRange so that it encompasses the search string. The select() method of the textRange is used to make the current range the selection. Visually, this text will appear as selected (that is, highlighted) text. This allows the user to see the text range at any time. To see this in action, click here; you will see a section of text highlighted (using the source code you see below).

sub selectText4Me_onClick
  Dim rDoc
  Set rDoc = document.body.createTextRange()
  rDoc.findText("this text will appear as selected")
  rDoc.select
end sub

Below is a code fragment which demonstrates how to locate the text for all the H1s in a document through the document's content.

// javascript
var H1s = document.all.tags("H1")

var el=H1s[0];
for (var i=0;i<H1s.length;i++)   //loop over the collection of H1's

while (H1s[i].isTextEdit != True) {
    el=el.parentElement;
}

var r=r.moveToElementText(H1s[i]);  //r.text contains text for the H1

If we assume that a mouse event has been handled, then we can pick up the x,y coordinates of the user action and move the range to that point -- perhaps to then select the word that the user did a mouse down on:

el=window.event.srcElement
while (el.isTextEdit != True)  //find if srcElement can create a text Range;
{  el=el.parentElement;}       //if not, find its closest parent who can

r=el.createTextRange; // creates a new textrange object which contains 
                      // the content where the user action occurred.

// move the range to where the user event occurred.
r.moveToPoint(window.event.x, window.event.y);

r.expand("word");       // expand the range to cover the word.

Here is a sentence with bold text in a SPAN with the ID of myBoldHTML.

You can change the inner and outer HTML using code like the lines shown below. Pass your mouse cursor over the sample lines of code to see how they work. When you replace innerHTML, the <B> and </B> tags remain. If you replace outerHTML, the <B> and </B> tags go away.

   Original HTML source looks like: <B ID=myBoldHTML>bold text</B>
Replacement HTML source looks like: 

 

myBoldHTML.innerHTML = "<I>italic text</I>"

myBoldHTML.outerHTML = "<I>italic text</I>"

myBoldText.insertAdjacentHTML "beforeBegin", "<I>italic text</I> "
You can do ...
an inner on <body>
an insertAdjacent "AfterBegin" or "BeforeEnd" on <body>
an outer, inner or adjacent on <input type=text> and <textarea> (but only Text)
an inner, outer and adjacent (HTML or Text) on <button> (Buttons can have HTML in them)
an inner, outer and adjacent on <span>, <b>, etc.
an inner, outer and adjacent on <p>, <ul>, <li>, etc.
an outer on a <br> or <img>
an inner on a <td>
an insertAdjacent "AfterBegin" or "BeforeEnd" on a <td>
You can't do ...
an outer on the <body>
an insertAdjacent "BeforeBegin" or "AfterEnd" on <body>
an outer on a <td>
an insertAdjacent "BeforeBegin" or "AfterEnd" on a <td>
an inner, outer or adjacent on a <tr> or <tbody>
an inner in a <br> or <img>
an inner on <table>
an inner on <object>
an inner on <applet>

This is done to guarantee that the context in which you perform the operation will not be mangled. For example, if you try to do p1.innerHTML("<p>") where p1 is the id of a <p> tag, it will fail, because you are attempting to put a <p> inside another <p>. But if you do p1.outerHTML( "<p>" ), it will succeed.

On the other hand, there are nesting situations which will fail, even though the browser when downloading a page would normally accept them. For example, h1.innerHTML("<h2>") will fail even though the browser would allow nested Hs. This may change in future versions of the browser to allow a wider variety of valid nestings. The solution, of course, it to be aware of your context when using any HTML-based inner, outer, or adjacent methods.

For example, to change the (text inside the parentheses), click on the text inside the parentheses. The source code looks like this:

<P>to change the (<SPAN onClick='this.innerHTML="the new text is here!"'>text 
inside the parentheses</SPAN>), click on the text inside the parentheses.</P>