Dynamic Content in Internet Explorer 4: Inserting Text and HTML | WebReference

Dynamic Content in Internet Explorer 4: Inserting Text and HTML

Logo

Dynamic Content in IE4:
new methods for inserting text and HTML


IE4 introduces 2 new object methods for inserting text and HTML into an already displayed page:

    objectReference.insertAdjacentText(position, textstring) and
    objectReference.insertAdjacentHTML(position, textstring)

As you can see, they each expect two arguments: position and textstring.

textstring is the text/HTML to be inserted and position is the where to insert. Because the methods insert text, they are non-destructive.

position can have one of four string values:

"BeforeBegin"

The text/HTML is inserted immediately before the element. It resides outside the element's enclosing tags so it is not affected by any formatting the element generates.

"AfterBegin"

The text/HTML is inserted after the element start tag but before any other enclosed content. It inherits any formatting generated by the start tag.

"BeforeEnd"

The text/HTML is inserted before the element closing tag and after any other enclosed content. It inherits any formatting generated by the element.

"AfterEnd"

The text/HTML is inserted immediately after the element and is unaffected by element formatting.

A Live Example, again

Our quote, in case you've forgotten:
    <BLOCKQUOTE ID="quote"> It was the <B ID="goodTimes"><I>best</I></B> of times, it was the <B ID="badTimes">worst</B> of times, ... </BLOCKQUOTE>
and a new set of functions
    function insTextBB() {
        badTimes.insertAdjacentText("BeforeBegin", "absolute ")
    }
    function insTextAB() {
        badTimes.insertAdjacentText("AfterBegin", "absolute ")
    }
    function insTextBE() {
        badTimes.insertAdjacentText("BeforeEnd", " experience I've ever had, and I've had them a number")
    }
    function insTextAE() {
        badTimes.insertAdjacentText("AfterEnd", " experience I've ever had, and I've had them a number")
    }
    function insHtmlBB() {
        goodTimes.insertAdjacentHTML("BeforeBegin", "absolute ")
    }
    function insHtmlAB() {
        goodTimes.insertAdjacentHTML("AfterBegin", "absolute ")
    }
    function insHtmlBE() {
        goodTimes.insertAdjacentHTML("BeforeEnd", " party I've ever been to, and I've been to wild parties a truckload")
    }
    function insHtmlAE() {
        goodTimes.insertAdjacentHTML("AfterEnd", " party I've ever been to, and I've been to wild parties a truckload")
    }

For IE4 Users

It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness...




For the Rest of Us

Button/
Function
The resulting HTML is...and the on-screen display is...
.insertAdjacentText
- BeforeBegin
...it was the absolute <B ID="badTimes">worst</B> of times......it was the absolute worst of times...
.insertAdjacentText
- AfterBegin
...it was the <B ID="badTimes">absolute worst</B> of times......it was the absolute worst of times...
.insertAdjacentText
- Before End
...it was the <B ID="badTimes">worst experience I've ever had, and I've had them a number</B> of times......it was the worst experience I've ever had, and I've had them a number of times...
.insertAdjacentText
- After End
...it was the <B ID="badTimes">worst</B> experience I've ever had, and I've had them a number of times......it was the worst experience I've ever had, and I've had them a number of times...
.insertAdjacentHTML
- BeforeBegin
...it was the <I>absolute</I> <B ID="goodTimes">best</B> of times......it was the absolute best of times...
.insertAdjacentHTML
- AfterBegin
...it was the <B ID="goodTimes"><I>absolute</I> best</B> of times......it was the absolute best of times...
.insertAdjacentHTML
- BeforeEnd
...it was the <B ID="goodTimes"><I>best</I> party I've ever been to, and I've been to wild parties a truckload</B> of times......it was the best party I've ever been to, and I've been to wild parties a truckload of times...
.insertAdjacentHTML
- AfterEnd
...it was the <B ID="goodTimes"><I>best</I></B> party I've ever been to, and I've been to wild parties a truckload of times......it was the best party I've ever been to, and I've been to wild parties a truckload of times...

Putting It All Together

The versatility and power of these new properties and methods, combined with techniques we have discussed in previous columns, give us the tools to create dynamic interactive applications.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: 09/24/97
Revised: 09/28/97

URL: http://www.webreference.com/dhtml/column5/insertAdj.html