This will demonstrate how to do it in different subtle requirements. I use ie-proprietary addAdjacentElement, addAdjacentHTML. Adding a few line prototyping HTMLElement with the same function will make it cross-browser (ie-moz). It is shown in green colored lines. They also show how to do it if you want to get rid of any trace of using ie-proprietary methods. Enough material for you to do your own study.
[tt]
<html>
<head>
<script language="javascript">
[green]
//added support for mozilla
//ref
// insertAdjacentHTML(), insertAdjacentText() and insertAdjacentElement()
// for Netscape 6/Mozilla by Thor Larholm (e-mail address)
// 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);
}
}
[/green]
//insertAdjacentElement etc are ie-proprietary, for moz add the prototyping lines
function doit() {
var oelem=document.getElementsByName("selname")[0];
var obj=oelem.cloneNode(true);
oelem.insertAdjacentElement ("afterEnd",obj);
}
function doit2() {
var oelem=document.getElementsByName("selname")[0];
var obj=oelem.cloneNode(true);
oelem.insertAdjacentElement ("afterEnd",obj);
oelem.insertAdjacentHTML("afterEnd","<br />");
}
function doit3() {
var celem=document.getElementsByName("selname");
var oelem=celem[celem.length-1];
var obj=oelem.cloneNode(true);
oelem.insertAdjacentElement ("afterEnd",obj);
}
function doit4() {
var celem=document.getElementsByName("selname");
var oelem=celem[celem.length-1];
var obj=oelem.cloneNode(true);
oelem.insertAdjacentElement ("afterEnd",obj);
oelem.insertAdjacentHTML("afterEnd","<br />");
}
</script>
</head>
<body>
<form name="frmname" onsubmit="return false">
<select name="selname">
<option value="1">one</option>
<option value="2">two</option>
</select>
</form>
<a href="#" onclick="doit()">insert clone after the first without break</a><br />
<a href="#" onclick="doit2()">insert clone after the first with break</a><br />
<a href="#" onclick="doit3()">insert clone after the last without break</a><br />
<a href="#" onclick="doit4()">insert clone after the last with break</a><br />
</body>
</html>
[/tt]