Entry

How do I prototype methods onto every HTMLElement using DOM ?

How do I emulate insertAdjacentHTML in Netscape 6/Mozilla ?

How do I emulate insertAdjacentHTML in Netscape 6/Mozilla ?

Aug 15th, 2005 11:35
Thor Larholm, http://jscript.dk/faq/mozEmuLarholm2.js http://jscript.dk/faq/mozinsertadjacenthtml.html

Even though Netscape 6/Mozilla (from now on NN6) supports insertion of 
unparsed HTML through the
  createContextualFragment() method
the insertion behaviour of IE4/IE5 in the methods
  insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement
()
is most desirable.
Furthermore, by emulating these methods you gain additional cross-
browser writing, and will not have to change this in your porting to 
NN6.
First of all, let's sum up behaviour and syntax of insertAdjacentHTML
() 
in IE4/IE5.
(remember, same syntax and behaviour applies to insertAdjacentText() 
and insertAdjacentElement() )
(can also be viewed in full at 
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/inser
t
adjacenthtml.asp )
object.insertAdjacentHTML(sWhere,sText)
object is the object upon which you wish to insert some unparsed HTML 
string. sWhere is a string that specifies where to insert the HTML 
string called sText, in relation to object. Possible values to swhere 
is
beforeBegin (immediately before the beginning of the object),
afterBegin (immediately after the beginning of the object),
beforeEnd (immediately before the end of the object)
and afterEnd (immediately after the end of the object).
The code itself: (explanation will follow below)
// insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement
()
// for Netscape 6/Mozilla by Thor Larholm me@jscript.dk
// Usage: include this code segment at the beginning of your document
// before any other Javascript contents.
if(typeof HTMLElement!="undefined" && !
HTMLElement.prototype.insertAdjacentElement){
	HTMLElement.prototype.insertAdjacentElement = function
(where,parsedNode)
	{
		switch (where){
		case 'beforeBegin':
			this.parentNode.insertBefore(parsedNode,this)
			break;
		case 'afterBegin':
			this.insertBefore(parsedNode,this.firstChild);
			break;
		case 'beforeEnd':
			this.appendChild(parsedNode);
			break;
		case 'afterEnd':
			if (this.nextSibling) 
this.parentNode.insertBefore(parsedNode,this.nextSibling);
			else this.parentNode.appendChild(parsedNode);
			break;
		}
	}
	HTMLElement.prototype.insertAdjacentHTML = function
(where,htmlStr)
	{
		var r = this.ownerDocument.createRange();
		r.setStartBefore(this);
		var parsedHTML = r.createContextualFragment(htmlStr);
		this.insertAdjacentElement(where,parsedHTML)
	}
	HTMLElement.prototype.insertAdjacentText = function
(where,txtStr)
	{
		var parsedText = document.createTextNode(txtStr)
		this.insertAdjacentElement(where,parsedText)
	}
}
Explanation:
The first line checks to see wether the browser already supports 
insertAdjacentHTML(). If not, it emulates these methods. This is done 
by prototyping 3 methods upon the HTMLElement object.
The first method is insertAdjacentElement(), which will be used 
generally for insertion logic of the new DOM node. This method can be 
used without insertAdjacentHTML() and/or insertAdjacentText() to 
provide standardized element insertion logic.
The second method is insertAdjacentHTML(), which creates a range 
object 
upon which the createContextualFragment() method is called to parse 
the 
unparsed HTML string into a DOM node. The newly created DOM node is 
then inserted using the emulated insertAdjacentElement() method.
The third method is insertAdjacentText(), which simply uses the 
document.createTextNode() method to create the new DOM text node and 
then calls the insertAdjacentElement() method to insert his upon the 
object.
To implement this easily in your project, copy the above code segment 
into a .js file (e.g. mozInsertAdjacent.js) and include it with
<script type="text/javascript" src="mozInsertAdjacent.js"></script>
before any other Javascript code on the page.
Simple testcases are (but definitely not limited to):
document.body.insertAdjacentHTML('beforeEnd','<div id=testEl 
style="color:#FF0000">This is a new <b>DIV</b> element inserted into 
the DOM tree (bold tags are rendered)</div>');
testEl.insertAdjacentText('afterBegin','This is <b>some</b> new text 
in 
testEl (bold tags are shown, not rendered)');
var pEl = document.createElement("P")
testEl.insertAdjacentElement('afterEnd',pEl); // P tag inserted after 
the testEl element.