js操作document文档元素 节点交换交换

<input type="text" value="1" id='text1'>
<input type="text" value="2" id='text2'>
<script>
function a1(){
var a=document.getElementById('text1');
var b=document.getElementById('text2');
var c=a;
a.parentNode.removeChild(a); 
b.parentNode.insertBefore(a,b);
b.parentNode.appendChild(c);
}
 window.setTimeout(a1,1000);

</script>

　　c=a 实际上是指向同一个节点元素 所以移除后使用

insertBefore插入到b之前 后边又追加在b父节点的最后面  但并没有出现3个输入框 而是将text1移动到了后面 
所以上面的代码可以进一步简化

<input type="file"  id='text1'>
<input type="file"  id='text2'>
<button οnclick="a1()">交换</button>
<script>
function a1(){
var a=document.getElementById('text1');
var b=document.getElementById('text2');
b.parentNode.appendChild(a);
}
 
 
</script>

　　使用jq操作

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js" type="text/javascript"></script>
<input type="file"  id='text1'>
<input type="file"  id='text2'>
<button οnclick="a1()">交换</button>
<script>
function a1(){
var a=$('#text1');
var b=$('#text2');
a.appendTo(b);

}
 
 
</script>

　　

转载于:https://www.cnblogs.com/ProDoctor/p/6103145.html