Ciao.
Usando
node.insertBefore(nodo_inserito,nodo_esistente)
nodo_esistente viene sostituito da nodo_inserito
o
nodo_inserito si aggiunge ai childs di node
Mi risultava che per 'salvare' nodo_esistente
si dovesse usare node.cloneNode(nodo_esistente)
ma da questo snippet non sembrerebbe:
Codice PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
margin:0px;
padding:0px
}
body {
text-align:center;
}
div#container {
margin: 0px auto;
width:700px;
border: 1px solid #CCCCCC;
text-align:left;
}
div#header {
height:80px;
}
div#target{
margin:30px; width:200px; background-color:#FFFFCC;
}
</style>
<script language="javascript" type="text/javascript">
function addEvent(elm, evType, fn, useCapture){
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent) {
var r = elm.attachEvent('on' + evType, fn);
return r;
} else {
elm['on' + evType] = fn;
}
};
function $(){
var elements = new Array();
for (var i = 0;i<arguments.length;i++){
var element = arguments[i];
if (typeof element == 'string'){
element = document.getElementById(element);
}
if (arguments.length == 1){
return element;
}
elements.push(element);
}
return elements;
};
function _createElement(el){
return document.createElement(el);
}
function _createTextNode(text){
return document.createTextNode(text);
}
function addCategory(){
var idString= 'category-';
var categoryList= $('categoryList');
var count= categoryList.getElementsByTagName('li').length;
var current= $(idString+count);
alert(current.getAttribute('id'));
var catInputValue= $('catInputField').value;
var catValue= _createTextNode(catInputValue);
var li= _createElement('li');
count++;
li.setAttribute('id',idString+count);
li.appendChild(catValue);
alert(li.getAttribute('id'));
categoryList.insertBefore(li,current);
}
function init(){
var catInsertButton= $('catInsertButton');
addEvent(catInsertButton,'click',addCategory,false);
}
addEvent(window,'load',init,false);
</script>
</head>
<body>
<div id="container">
<div id="header"><h1>Test</h1></div>
<div id="target">
<p id="jaxcat">
<input id="catInputField" name="cat" type="text" maxlength="30" />
<input id="catInsertButton" name="insert" type="button" value="_go_!" />
</p>
<ul id="categoryList">
<li id="category-1">Uno
[/list]
</div>
</div>
</body>
</html>