首页 > 试题广场 >

执行以下代码，其实现的效果为（）

[单选题]

执行以下代码，其实现的效果为（）

<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>

鼠标单击button1后将button1链接到button2的后面

鼠标单击button1后将button1移动到button2的后面

鼠标单击button1后将button2移动到button1的后面

鼠标单击button1后将button2链接到button1的后面

查看正确选项

旺仔大馒头

<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); // 复制一个button1结点
     var parent = obj.parentNode; // 找到button1的父节点
     parent.appendChild(clone); // 将复制的结点加入到父节点，也就是button1的复制结点现在在button2后面了
     parent.removeChild(obj); // 移除原来的button1
 }
 </script>

所以最终达到的效果，就是把button1结点移到button2结点后面。

发表于 2019-08-20 08:50:30 回复(6)

sunnyJS

只有我们清楚appendChild() 方法可向节点的子节点列表的末尾添加新的子节点即可。

发表于 2019-08-08 14:58:12 回复(0)

前端GG

谁能告诉我链接是啥

发表于 2019-09-03 22:18:10 回复(7)

hanah99

链接和移动的差别是在哪里有大神解答吗？?

发表于 2019-12-28 20:39:25 回复(0)

青岛老冷

可能是我有点杠, 他这个实现的功能是复制button1然后添加到button2后面, 最后删掉原来的button1, 他说的移动指的是指之前那个位置变化, 但是之前那个已经被删了, 严格意义上不是移动所以... ...🤣

发表于 2019-08-31 23:12:04 回复(1)

Ferrarih

所以答案错了，是button1移到了button2后面，选择C

编辑于 2019-08-30 23:07:18 回复(0)

Three_Stone

this指向的是全局对象，在这里指代window节点？复制出来一个全局对象后，获取父节点obj这个时候应该包含了button1和button2，在button1后添加了 appendchild obj, 但是后面又removechild button1 因此只剩button2

发表于 2019-08-12 17:12:09 回复(5)

主动的乌龟在努力

复制克隆能说成是单纯的移动吗，他俩已经是两个节点了吧

发表于 2022-10-29 15:41:12 回复(0)

进击的蚂蚁only

<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) { //这里的obj，指的时button1
var clone = obj.cloneNode(true); //获取当前（button1）的节点并复制
var parent = obj.parentNode; //访问当前（button1）节点的父节点
parent.appendChild(clone); //在当前（button1）节点的后面添加一个子节点（子节点就是自定义好的clone）
parent.removeChild(obj); //移除当前（button1）节点（即按钮1）
}

</script>

总结：

① 运行后浏览器界面有两个按钮，1 和 2

②执行moveBtn方法，方法执行到第三行时，是 1 2 1

③方法执行到第四行时，删除1 2 1中的第一个 1 ，所以最后浏览器中的按钮只剩下 2 1

发表于 2022-08-09 19:15:22 回复(0)