首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么使用appendChild移动元素在JS上不起作用

在JavaScript中,appendChild()方法用于将一个元素节点添加到另一个元素节点的子节点列表的末尾。如果使用appendChild()方法移动元素时发现不起作用,可能是由于以下几个原因:

  1. 元素不存在或未正确获取:在使用appendChild()方法之前,需要确保已正确获取到要移动的元素节点。可以使用getElementById()、getElementsByClassName()、querySelector()等方法来获取元素。
  2. 元素已经存在于DOM树中:appendChild()方法要求被移动的元素节点不能已经存在于DOM树中的其他位置。如果元素已经存在于DOM树中,需要先使用removeChild()方法将其从原来的位置移除,然后再使用appendChild()方法添加到新的位置。
  3. 元素的父节点不存在或未正确获取:在使用appendChild()方法之前,需要确保已正确获取到要添加到的父节点。可以使用getElementById()、getElementsByClassName()、querySelector()等方法来获取父节点。
  4. 元素的display属性为none:如果要移动的元素的display属性设置为none,即元素在页面中不可见,那么使用appendChild()方法将不起作用。需要先将元素的display属性设置为其他值,如block或inline,然后再进行移动操作。
  5. 元素的position属性为fixed或absolute:如果要移动的元素的position属性设置为fixed或absolute,即元素使用绝对定位或固定定位,那么使用appendChild()方法将不起作用。需要先将元素的position属性设置为其他值,如relative或static,然后再进行移动操作。
  6. 元素的样式或布局问题:如果要移动的元素在页面中存在样式或布局问题,可能会导致使用appendChild()方法时不起作用。可以通过检查元素的CSS样式、布局属性以及父节点的布局属性来解决问题。

总结起来,使用appendChild()方法移动元素在JavaScript上不起作用可能是由于元素不存在或未正确获取、元素已经存在于DOM树中、元素的父节点不存在或未正确获取、元素的display属性为none、元素的position属性为fixed或absolute、元素的样式或布局问题等原因导致的。在解决问题时,需要仔细检查以上可能的原因,并逐一排除。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS 口袋书】第 8 章:以更细的角度来看 JS 中的 this

this 实际上是一个移动的目标,代码执行过程中可能会发生变化,而没有任何明显的原因。首先,看一下this关键字在其他编程语言中是什么样子的。...即使全局上下文中调用函数,隐式绑定也作用 function whoIsThis() { console.log(this); } whoIsThis(); 咱们无法从代码中看出,但是JS引擎将该函数分配给全局对象...现在应该清楚为什么要在 React 使用 bind来重新绑定类方法了吧。...为什么? 箭头函数将this指向其封闭的环境(也称“词法作用域”)。换句话说,箭头函数并不关心它是否window对象中运行。它的封闭环境是对象post1,以post1为宿主。...隐式绑定表示当一个函数引用 this 并作为 JS 对象的一部分运行时,this 将指向这个“宿主”对象。但 JS 函数总是一个对象中运行,这是任何全局函数在所谓的全局作用域中定义的情况。

2.7K20

Web Components系列(七) ——自定义组件的生命周期

我们使用前端组件框架的时候,都知道每个组件都有各自的生命周期,明确了组件生命周期后,开发者就可以组件的不同生命周期执行不同的代码逻辑,从而达到管理组件的作用。...为了使 Custom Elements 使用上更加灵活,它也有”生命周期“回调函数,可以让开发者定义好在组件不同生命时期可以被执行的方法。...Custom Elements 生命周期划分 Custom Elements 的构造函数中,可以指定多个不同的回调函数,它们将会在元素的不同生命时期被调用: connectedCallback:当...注意:自定义元素的生命周期回调函数是被使用在它的构造函数中的。...生命周期回调函数的使用 首先看一下效果: [2022-02-12 23.43.06] 这里需要注意的是:adoptedCallback 回调只有将自定义元素移动到新文档(一般是 iframe)中时才会被触发

82500

手写现代前端框架diff算法-前端面试进阶

比如key为什么不能使用index呢?为什么使用随机数呢?答案当然是影响性能,那为什么?相信你看完本文的diff算法就能略懂一些。...diff算法的概念diff算法, 是 Virtual DOM 产生的一个概念, 作用是用来计算出 Virtual DOM 中被改变的部分,然后根据算法算出dom的结果进行原生DOM操作,而不用重新渲染整个页面...(本案例提供核心代码,以及完整案例)简单理解版本的思路的核心,可分为三个步骤:1.模拟"dom树",将dom转换为js数组。定义js构造函数,可同步dom对象。...当前demo处理了以下方法: Change: 'Change',//表示元素有变化 Move: 'Move',//表示移动了位置 Add: 'Add',//表示元素是新增的 Del: 'Del'...,//表示元素给删除了 DiffPropsList: 'DiffPropsList',//表示元素对应的属性列表有变动 DelProps: 'DelProps',//表示该属性给删除 ChangeProps

30620

移动端H5通过flexible.js+rem自适应适配方案

原理 手机淘宝团队出的简洁高效移动端适配库 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。...px值/ 75 剩余的,让flexible.js来去算 页面元素大小取值方法 ①最后的公式:页面元素的rem值=页面元素值(px) / (屏幕宽度/划分的份数)) ②屏幕宽度/划分的份数就是html...的 font-size的大小 ③或者:页面元素的rem值=页面元素值(px) / html font-size字体大小 三、使用步骤 技术选型案例 方案:我们采取单独制作移动页面方案· 技术:布局采取...VSCode px转rem插件 cssrem; image.png 作用:编写代码时自动根据写的px单位计算出等于多少rem 注意: cssrem默认的html字体大小cssroot为16px...,因此要修改为此时的75px; 修改方法:vscode设置中查找cssroot,设置为75,设置完成后重新启动vscode就可以了; 具体可以查看此插件VSCode cssrem插件 五、flexible.js

1.2K50

手写现代前端框架diff算法

比如key为什么不能使用index呢?为什么使用随机数呢?答案当然是影响性能,那为什么?相信你看完本文的diff算法就能略懂一些。...diff算法的概念diff算法, 是 Virtual DOM 产生的一个概念, 作用是用来计算出 Virtual DOM 中被改变的部分,然后根据算法算出dom的结果进行原生DOM操作,而不用重新渲染整个页面...(本案例提供核心代码,以及完整案例)简单理解版本的思路的核心,可分为三个步骤:1.模拟"dom树",将dom转换为js数组。定义js构造函数,可同步dom对象。...当前demo处理了以下方法: Change: 'Change',//表示元素有变化 Move: 'Move',//表示移动了位置 Add: 'Add',//表示元素是新增的 Del: 'Del'...,//表示元素给删除了 DiffPropsList: 'DiffPropsList',//表示元素对应的属性列表有变动 DelProps: 'DelProps',//表示该属性给删除 ChangeProps

34520

手写JavaScript常见5种设计模式1

比如key为什么不能使用index呢?为什么使用随机数呢?答案当然是影响性能,那为什么?相信你看完本文的diff算法就能略懂一些。...diff算法的概念 diff算法, 是 Virtual DOM 产生的一个概念, 作用是用来计算出 Virtual DOM 中被改变的部分,然后根据算法算出dom的结果进行原生DOM操作,而不用重新渲染整个页面...(本案例提供核心代码,以及完整案例) 简单理解版本的思路的核心,可分为三个步骤: 1.模拟"dom树",将dom转换为js数组。 定义js构造函数,可同步dom对象。...当前demo处理了以下方法: Change: 'Change',//表示元素有变化 Move: 'Move',//表示移动了位置 Add: 'Add',//表示元素是新增的 Del: '...Del',//表示元素给删除了 DiffPropsList: 'DiffPropsList',//表示元素对应的属性列表有变动 DelProps: 'DelProps',//表示该属性给删除

27710

【建议】记录一次BAT一线互联网公司前端JavaScript面试

if(true) { let x=100 } console.log(x) // 会报错 自由变量 如果一个变量在当前作用域没有定义,但被使用了,向上级作用域去找,一层一层一次寻找,直到找到为止...this 作为普通函数被调用 使用call,apply,bind被调用 作为对象方法被调用 class方法中被调用 箭头函数 this取什么值,是函数执行的时候确定的,不是函数定义的时候确定的。...appendChild(p2) 获取子元素列表和获取父元素 //获取子元素列表 const div1 = document.getElementById('div1') const child = div1...document.createElement('p') newP.innerHTML = 'this is newP' // 插入节点 div1.appendChild(newP) // 移动节点 const...(li) } list.appendChild(frag) jsonp的原理,为什么它不是真正的ajax 浏览器的同源策略和跨域 document load 和 ready的区别 load: 页面的区别资源加载完才会执行

1.6K20

px和rem的换算与设置

一般所有浏览器的html根元素font-size:16px 1rem = 16px 所以所有px值都基于它来换算 设计稿px/换算的rem = 16px / 1 ===> 换算的rem= 设计稿...px/16px 一般我们拿到的移动端设计稿是基于iphone6的 所以一般以这个确定的屏幕做参考 iphone6的屏幕宽度为375px 所以设置基准rem = 375 /10 =37.5 为啥/...10,这个无所谓,只是一个自定义规定,为了让根px不要那么大 除了设置html根元素上的font-size之外,还要配合flexible.js使用 什么是flexible.js?...document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild...的主要作用是: 1、为html添加data-dpr属性和style属性,style添加font-size作为1rem的基准值。

3.3K10

jquery弹窗插件dialog_jquery进度条插件

来看看nanobar.js作者jacoborus是怎么做到的吧!...横向应该是没有动画效果,但是从官网演示效果来看,横向仍然有一定的动画效果,这个问题下面会提到。...首先声明了三个变量: 名称 描述 el 这就是动态创建的元素-一个既没有ID也没有Class的空div applyGo 进度条移动的方法 nanobar nanobar对象,它将在...: 名称 作用 rm 用于进度完成后,删除动态创建的元素 init 初始化方法,这个需要重点关注 然后是一些必要处理,由这三个部分组成: addCss方法,为head节点内增加<...这样,当用最简单的方式调用go时,它的顺序就是这样的: 容器nanobar.go => applyGo => 本体bar.go ---- 调用了go方法后,为什么横向会有一定的动画效果呢?

3.8K50

前端拾零02—H5拖放总结

拖放总览 前端拖放,无非通过两种方式:1、js鼠标事件监听,动态改变坐标位置;2、H5原生api。随着H5的普及,推荐使用相对简单的H5原生api实现拖放功能。...拖放元素 2.1 拖放元素属性 draggable: 设置元素可被拖放 2.2 拖放元素监听事件 ondragstart: 拖放开始时触发事件,作用于拖放元素 ondrag: 拖放期间连续触发事件,作用于拖放元素...目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件,作用于目标元素 ondragover: 拖放元素目标元素移动时触发事件,作用于目标元素 ondrop:...拖放元素目标元素上放置时触发事件,作用于目标元素 ondragleave: 拖放元素离开目标元素时触发事件,作用于目标元素 3.2 demo <div id="div1" ondragenter="dragenter...中设置 (1) none: 不能拖放(除文本框外所有<em>元素</em>的默认值) (2) move: <em>移动</em>拖放<em>元素</em> (3) copy: 复制拖放<em>元素</em> (4) link: 放置目标自动打开拖动<em>元素</em>(拖放<em>元素</em>必须是有URL

4.2K730

我们应该合并网站上的CSSJS文件吗?

我们经常看到带有组合CSS/JS文件的页面,这些文件远远超过 2 MB  未压缩的 大小。这对浏览器来说是一项巨大的任务,尤其是中端移动设备等低功耗硬件上。  ...即使东西视觉上看起来很好,一些引擎盖下的功能可能已经坏了,你可能要到很久以后才会发现。例如,按钮页面上不起作用,或页面元素消失,或滑块无法按设计工作,等等。...无论使用哪个插件来组合CSS/JS文件,我的建议是 始终广泛测试你的网站 以确保站点功能不会被破坏。...什么时候合适合并CSS/JS文件 您的网站使用HTTP/1.1 你有一个简单的网站,没有太多脚本 什么时候不合并CSS/JS文件 你的网站使用HTTP/2 你有一个复杂/大型的网站(即,它使用大量脚本和...所以建议不使用css/js文件合并。

1.5K20

Web-第三天 JavaScript学习【悟空教程】

掌握JavaScript的基本语法 掌握JavaScript的对象获取 掌握JavaScript标签的基本操作 使用JS可以获得指定元素 使用JS可以对指定元素的样式进行操作(获得或修改) 使用JS可以编写定时程序...第1章 案例:使用JS完成注册页面的校验 1.1 案例介绍 用户提交表单时,需要对用户的填写的数据进行校验。...BOM:浏览器对象 DOM:Document Object Model.操作文档中的元素和内容. 1.2.1.2 JavaScript的作用 使用JavaScript添加页面动画效果,提供用户操作体验...JS完成表单校验 使用JS完成表格的隔行换色 使用JS完成复选框的全选效果 使用JS完成省市联动效果 今日内容学习目标 使用JS可以编写各种事件 使用JS可以获得指定元素 使用JS可以创建元素 使用JS...可以对元素的属性进行操作 使用JS可以对元素的标签体进行操作 使用JS可以对指定元素的样式进行操作(获得或修改) 第4章 案例:完善注册表单校验 4.1 案例介绍 昨天我们已经完成了表单数据校验,整个实现过程存在两处不足的地方

3.4K10

纯原生组件化-模块化的探索

shadow-DOM的一个特点,shadow 里边所有的DOM元素不会被外界的代码所影响,这也就是为什么video和audio的 UI 难以自定义的原因了-.-。...,现有的API貌似没有一个可以触发这个事件的,因为像appendChild或者insertBefore这一类的,对于已经存在的DOM元素都是先移除后新增的,所以不存在有直接移动的行为 attributeChangedCallback...这里有之前的一篇讲解ES-module的文章:传送阵 所以,不再赘述一些module相关的基础,直接将封装好的组件代码挪到一个js文件中,然后页面中引用对应的js文件完成调用。...这个使用webpack打包的React和Vue这类框架上边就是很明显的问题,如果打包完的js文件过大,几百k,甚至数兆。 需要等到这个文件全部下载完毕后才会开始运行代码,构建页面。.../cus-elements-info-list.js"> new Component与document.createElement效果一样,用于不知道组件的注册名的情况下使用 总结

80620

前端拾零02—H5原生拖放总结 【原创】

拖放总览 前端拖放,无非通过两种方式:1、js鼠标事件监听,动态改变坐标位置;2、H5原生api。随着H5的普及,推荐使用相对简单的H5原生api实现拖放功能。...拖放元素 2.1 拖放元素属性 draggable: 设置元素可被拖放 2.2 拖放元素监听事件 ondragstart: 拖放开始时触发事件,作用于拖放元素 ondrag: 拖放期间连续触发事件,作用于拖放元素...目标元素 3.1 目标元素监听事件 ondragenter: 拖放元素进入目标元素时触发事件,作用于目标元素 ondragover: 拖放元素目标元素移动时触发事件,作用于目标元素 ondrop:...拖放元素目标元素上放置时触发事件,作用于目标元素 ondragleave: 拖放元素离开目标元素时触发事件,作用于目标元素 3.2 demo <div id="div1" ondragenter="dragenter...中设置 (1) none: 不能拖放(除文本框外所有<em>元素</em>的默认值) (2) move: <em>移动</em>拖放<em>元素</em> (3) copy: 复制拖放<em>元素</em> (4) link: 放置目标自动打开拖动<em>元素</em>(拖放<em>元素</em>必须是有

1.9K20

无界微前端是如何渲染子应用的?

目前的使用效果非常好,不仅性能表现出色,而且使用体验也不错。尽管使用的过程中,我们也遇到了一些问题,但这些问题往往源于我们对框架实现的不熟悉。我们深入研究了无界技术的源码,并将在本文中与大家分享。...无界使用 iframe 来实现 JS 沙箱,由于这个设计,无界以下方面表现得更加出色:应用切换没有清理成本允许一个页面同时激活多个子应用性能相对更优无界渲染子应用,主要分为以下几个步骤:创建子应用 iframe...当我们 iframe 中,使用 document.querySelector查找 #app 的 DOM 时,它只能在 iframe 中查找(副作用留在 iframe 中),但 UI 是渲染到 webComponent...,这样,就能直接执行子应用的 JS 代码,不需要另外包一层函数执行 JS无界微前端中,有非常多像 querySelector 的属性/方法,需要对每个属性方法的副作用进行修正。... stopIframeLoading 后,即停止 iframe 加载,获得纯净的 iframe 后,再对副作用进行处理无界微前端 JS 有非常多的副作用需要修正处理,文章不会一一列举,这里会说一下大概

5.1K30

无界微前端是如何渲染子应用的?

目前的使用效果非常好,不仅性能表现出色,而且使用体验也不错。 尽管使用的过程中,我们也遇到了一些问题,但这些问题往往源于我们对框架实现的不熟悉。...无界使用 iframe 来实现 JS 沙箱,由于这个设计,无界以下方面表现得更加出色: • 应用切换没有清理成本 • 允许一个页面同时激活多个子应用 • 性能相对更优 无界渲染子应用,主要分为以下几个步骤...当我们 iframe 中,使用 document.querySelector查找 #app 的 DOM 时,它只能在 iframe 中查找(副作用留在 iframe 中),但 UI 是渲染到 webComponent...中取值, 这样,就能直接执行子应用的 JS 代码,不需要另外包一层函数执行 JS 无界微前端中,有非常多像 querySelector 的属性/方法,需要对每个属性方法的副作用进行修正。...后,再对副作用进行处理 无界微前端 JS 有非常多的副作用需要修正处理,文章不会一一列举,这里会说一下大概,让大家对这个有点概念。

1.1K30

你不知道的Virtual DOM(一):Virtual Dom介绍

Dom介绍 你不知道的Virtual DOM(二):Virtual Dom的更新 你不知道的Virtual DOM(三):Virtual Dom更新优化 你不知道的Virtual DOM(四):key的作用...三、为什么需要VD VD 最大的特点是将页面的状态抽象为 JS 对象的形式,配合不同的渲染工具,使跨平台渲染成为可能。如 React 就借助 VD 实现了服务端渲染、浏览器渲染和移动端渲染等功能。...此外,进行页面更新的时候,借助VD,DOM 元素的改变可以在内存中进行比较,再结合框架的事务机制将多次比较的结果合并后一次性更新到页面,从而有效地减少页面渲染的次数,提高渲染效率。...从上面的例子中,可以看出页面的呈现会分以下3个阶段: JS计算 生成渲染树 绘制页面 这个例子里面,JS计算用了691毫秒,生成渲染树578毫秒,绘制73毫秒。...创建子元素 // appendChild执行的时候,会检查当前的this是不是dom对象,因此要bind一下 children.map(createElement)

52220
领券