如何交换两个DOM节点

作者: 葶寳寳 | 来源:发表于2017-04-01 10:01 被阅读0次

jS|DOM操作
如何交换两个DOM节点
面试题库
前端面试题
JavaScript - 2.Dom<增删改查> + 事件
DOM知识整理
JS的DOM树总结
性能、打包题目
js dom节点操作
如何交换两个嵌套的元素

这是阿里面舍友的一道题，这题的本身没难度，考察对DOM的基本操作，只是当时对DOM的操作了解甚少．接下来附上我的代码：

<div id="parent">
    <span id="a1">a</span>
    <span id="b1">b</span>
</div>
<script>
    let changeNode = document.getElementById("b1");
    let existingnode= document.getElementById("a1");
    let p= document.getElementById("parent");
    p.insertBefore(changeNode,existingnode);
</script>

效果如下：

交换之前.png

交换之后.png

如何交换嵌套关系的两个元素，即将更新，敬请期待！

<em>如有帮助，请点个喜欢哦～</em>

jS|DOM操作
DOM节点的获取 DOM节点的创建 DOM节点删除修改DOM元素将指定两个DOM元素交换位置
如何交换两个DOM节点
这是阿里面舍友的一道题，这题的本身没难度，考察对DOM的基本操作，只是当时对DOM的操作了解甚少．接下来附上我的代...
面试题库
总面试时长- 50分钟 HTML - 5分钟如何交换两个DOM节点: script 添加 async、defer...
前端面试题
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 2、DOM操作 ——如何添加、移除...
JavaScript - 2.Dom<增删改查> + 事件
2 DOM 2.1 DOM介绍 2.2 节点 2.3 如何获取节点(查询) 2.4 节点的分类nodeType 2...
DOM知识整理
1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 document.documentEl...
JS的DOM树总结
一【DOM树节点】 DOM节点分为三大类：元素节点、文本节点、属性节点文本节点、属性节点，为元素节点的两个子节点...
性能、打包题目
前端性能优化页面DOM节点太多，会出现什么问题？如何优化？ DOM太多会造成页面加载卡顿，操作DOM节点在外...
js dom节点操作
获取dom节点新增dom节点删除dom节点
如何交换两个嵌套的元素
交换两个DOM节点在文档中的位置,下面的代码中分了两种情况：(1)a b是同级元素(2)a嵌套b（或者b嵌套a） ...