42.鼠标单击Button1后将Button1移动到Button2的后面

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>鼠标单击Button1后将Button1移动到Button2的后面</title>
 6 </head>
 7 <body>
 8 <div>
 9     <input type="button" id="button1" value="1" onclick="moveBtn(this);">
10     <input type="button" id="button2" value="2"/>
11 </div>
12 <script type="text/javascript">
13     function moveBtn(obj) {
14 
15         var clone = obj.cloneNode(true);
16         var parent = obj.parentNode;
17         parent.appendChild(clone);
18         parent.removeChild(obj);
19     }
20 </script>
21 </body>
22 
23 
24 </html>

View Code

点击前：

点击后：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标单击Button1后将Button1移动到Button2的后面</title>
</head>
<body>
<div>
    <input type="button" id="button1" value="1" onclick="moveBtn(this);">
    <input type="button" id="button2" value="2"/>
</div>
<script type="text/javascript">
    function moveBtn(obj) {

        var clone = obj.cloneNode(true);
        var parent = obj.parentNode;
        parent.appendChild(clone);
        parent.removeChild(obj);
    }
</script>
</body>


</html>