Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
adding a listbox
- Thread starter onressy
- Start date
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]
[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]
Further note:
To avoid page scrolling..., usually add the return false to the onclick. It is indeed normally a desirable behaviour. So maybe this would make them more friendly for long page with anchors located at a position only reached after scrolling.
[tt]
<a href="#" onclick="doit()[blue];return false;[/blue]">insert clone after the first without break</a><br />
<a href="#" onclick="doit2()[blue];return false;[/blue]">insert clone after the first with break</a><br />
<a href="#" onclick="doit3()[blue];return false;[/blue]">insert clone after the last without break</a><br />
<a href="#" onclick="doit4()[blue];return false;[/blue]">insert clone after the last with break</a><br />
[/tt]
To avoid page scrolling..., usually add the return false to the onclick. It is indeed normally a desirable behaviour. So maybe this would make them more friendly for long page with anchors located at a position only reached after scrolling.
[tt]
<a href="#" onclick="doit()[blue];return false;[/blue]">insert clone after the first without break</a><br />
<a href="#" onclick="doit2()[blue];return false;[/blue]">insert clone after the first with break</a><br />
<a href="#" onclick="doit3()[blue];return false;[/blue]">insert clone after the last without break</a><br />
<a href="#" onclick="doit4()[blue];return false;[/blue]">insert clone after the last with break</a><br />
[/tt]
- Status
Similar threads
- Locked
- Question
