Перемещение элементов DOM

[melky]

в jquery обработчики событий для этого элемента сохраняются, если использовать detach

[Octane]

а как же атрибуты, обработчики событий ?

appendChild и insertBefore перемещают элементы, если те уже находятся в дереве

[ваый]

appendChild перемещает элемент, а не создает новый, поэтому все обработчики и атрибуты никуда не пропадают, элемент-то все тот же, просто на новом месте. Демонстрация:

<style>
.label {clear: both; font-family: Verdana; font-size: 12px;}
#test {width: 15px; height: 15px; background-color: darkseagreen; border: 1px #444 solid;}
.cont {width: 50px; height: 50px; border: 1px #555 solid; margin: 10px 10px 0 0; float: left; padding: 5px;}
.cont1 {background-color: #ddd;}
.cont2 {background-color: #ddd;}
</style>

<div class="label">Click on the green square.</div>

<div id="cont1" class="cont cont1">
    <div id="test" title="Click me!"></div>
</div>
<div id="cont2" class="cont cont2"></div>

<script>
document.getElementById('test').addEventListener('click', function() {
    var newParent = this.parentNode.id == 'cont1' ? 'cont2' : 'cont1';
    document.getElementById(newParent).appendChild(this);
}, false);
</script>

[Aetae]

а как же атрибуты, обработчики событий ?

В том то и фишка.

<style>
p{text-align:center;height:25px;margin:0;border:1px solid #000}
</style>
<div id="hover">
<p><input type="button" value="recolor"></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
var input = document.getElementsByTagName('input')[0];
document.getElementById('hover').onmouseover = function(e){
  var t=e?e.target:window.event.srcElement;
  if(t.tagName=='P'&&!t.firstChild)t.appendChild(input);
}
input.onclick = function(){this.parentNode.style.backgroundColor = 'rgb('+Math.floor(Math.random()*256)+',0,0)'}
</script>

Т.е. можнро навешивать обработчики без привязки к конкретному элементу. Хотя это и черевато.)