<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 onclick="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 onclick="a1()">交换</button> <script> function a1(){ var a=$('#text1'); var b=$('#text2'); a.appendTo(b); } </script>