无涯教程网

Javascript 移动加载元素的最佳方式

发布于08月13日

我想把已经是loaded的元素移到不同的位置.

我已经提到了https://stackoverflow.com/a/16127049/19743544个

这appendChild个方法将一个元素添加到DOM.

insertAdjacentHTML方法接受字符串而不是元素，因此他们必须解析字符串并根据它创建元素

我可以看出，appendChild和insertAdjacentHTML实际上都意味着create是一个元素，而不是moving是某个人加载的元素.

在下面的示例中，如何将div .apple移到div orange之前的节main中？

const main = document.querySelector('.main'),
  apple = document.querySelector('.apple'),
  orange = document.querySelector('.orange');

<section class="main">
  <div class="orange"></div>
</section>

<div class="apple"></div>

推荐答案

使用insertBefore

const main = document.querySelector('.main'),
const apple = document.querySelector('.apple'),
const orange = document.querySelector('.orange');

main.insertBefore(apple, orange);

请注意，如果元素已存在于DOM中，则将移动该元素(如果您希望将其添加到最后一个位置)，则无论是intertBepreed还是appendChild都会移动它

如果给定子 node 是对文档中现有 node 的引用，则appendChild()会将其从当前位置移动到新位置.

Javascript相关问答推荐

我不知道为什么我的JavaScript没有验证我的表单

传递一个大对象以在Express布局中呈现

使用JavaScript重新排序行

如何将Map字符串，布尔值转换为{key：string；value：bo布尔值；}[]？<>

为什么Mutations 观察器用微任务队列而不是macrotask队列处理？

如何通过将实例方法的名称传递给具有正确类型的参数的继承方法来调用实例方法？

在HTML语言中调用外部JavaScript文件中的函数

如何创建返回不带`new`关键字的实例的类

在画布中调整边上反弹框的大小失败

按什么顺序接收`storage`事件？

FileReader()不能处理Firefox和GiB文件

Chrome上的印度时区名S有问题吗？

如何在Web项目中同步语音合成和文本 colored颜色更改

React数组查找不读取变量

AstroJS混合模式服务器终结点返回404

react ：图表负片区域不同 colored颜色

使用onClick单击子元素时，使用交点观察器的关键帧动画意外运行

Google OAuth 2.0库和跨域开放程序的问题-策略错误

在不使用AJAX的情况下将JavaScript数组值传递给Laravel控制器？

查找函数句柄的模块/文件

实用课程推荐

相关教程推荐