Dynamic Content in Internet Explorer 4: Inserting Text and HTML

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

Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
Disabled
RESET



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: https://www.webreference.com/dhtml/column5/insertAdj.html