| home / experts / dhtml / column5 |   
|
|
IE4 introduces 2 new object methods for inserting text and HTML into an already displayed page:
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.
and a new set of functions<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>
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")
}
It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness...
| 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... |
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
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: 09/24/97
Revised: 09/28/97
URL: http://www.webreference.com/dhtml/column5/insertAdj.html
