Js & Vue 使用 appendChild 后源元素(节点)消失了

最新推荐文章于 2023-11-22 17:10:59 发布
最新推荐文章于 2023-11-22 17:10:59 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： JavaScript Vue 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cookcyq__/article/details/121525788
版权

据官方文档
里面的开头说明：
在这里插入图片描述

明确指出源节点消失是引用问题，要想保留源(元素)节点可以使用 Node.cloneNode(true) 属性，其中 true 表示深拷贝。

注意，使用 Note.cloneNode 克隆过来的元素并不会保留原有的绑定事件。

cookcyq
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端开源库-vue-append
08-29
前端开源库-vue-appendvue append，vue append，类似v-html指令，但它可以调用javascript函数
JS中appendChild追加子节点无效的解决方法
10-17
在JavaScript中，`appendChild`方法是用于向元素的子节点列表末尾添加一个新的子节点。然而，在某些情况下，我们可能会遇到`appendChild`追加子节点无效的问题。这个问题通常与DOM操作的规则有关，特别是当尝试将一...
js append()后的元素失去事件解决方法1
weixin_42298679的博客
05-16 600
简单解决了动态append添加后失去事件的解决方法。
append节点原节点消失 clone
勋勋勋勋小勋勋的博客
01-06 277
clone() 方法，调用clone()方法可以生成一个被选元素的副本，复制了一个被选元素 $('.class').append($('#id').clone(true));
js的append拼接html丢失css样式解决
weixin_30681121的博客
01-02 1653
　　　　　　　　　　　　　　　　　　　　　　　　　　　　htmlApp += "<li id='leftli"+lunci+"'>"; htmlApp += "<span id='leftlunci"+lunci+"'>"; htmlApp += "第"+lunci+"轮"; htmlApp += "</span>\...
【JavaScript】appendChild一个的注意点之会删除原dom树节点
qq_43248623的博客
04-08 1003
最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。 首先看一下MDN上对appendChild的定义： Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将
初学js插入节点appendChild insertBefore使用方法
10-28
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
Vue中fragment.js使用方法小结
11-21
假设我们需要在一个ID为`'parent'`的节点上插入10000个`div`元素，最直观的方法是使用`document.createElement`和`appendChild`。然而，这种方式会频繁地触发DOM的重绘和回流，导致性能下降，甚至可能使页面卡顿。...
Vue中fragment.js使用方法详解
10-20
在Vue开发过程中，有时我们需要一次性地插入大量DOM元素，以提高效率和用户体验。这时，`fragment.js`或Vue中的`createDocumentFragment`方法就显得尤为重要。`createDocumentFragment`是DOM API提供的一种机制，...
portal:提供了一种在Vue项目中使用函数式调用，将弹窗组件渲染到body节点的方式
05-25
在 Vue2.x 中并没有类似的功能，该 npm 包利用 Vue 中的 extend 和 Js 中的 appendChild 将需要的组件 append 到 body 下，实现弹窗和主体页面充分解耦，并且利用 Promise 实现使用组件函数化，脱离对具体 UI 的依赖...
vue-append:vue-append，类似于v-html指令，但可以调用javascript函数
05-25
附加值 vue-append，类似于v-html指令，但可以调用javascript函数 安装 npm install vue-append --save # or yarn add vue-append ES6模块 通过npm作为vue-append可用。 import VueAppend from 'vue-append' Vue . use ( VueAppend ) 普通JS var VueAppend = require ( 'vue-append' ) Vue . use ( VueAppend ) 直接包含 您也可以直接在[removed]标记中添加它。 它将自动安装自身，并添加一个全局VueAppend 。 事件 附加的 如果html append，脚本已下载且没有抛出错误，则将触发appended事件。 附加器 如果在添加html时抛出错误，则将触发a
append添加元素后点击事件失效
qq_40703860的博客
04-21 706
append
appendchild 被追加页面元素 消失
weixin_30629977的博客
01-26 482
一般都是自己创建元素然后append到页面的 但是如果是页面本身有的元素append到另一个页面元素呢？ 貌似是： 元素的确成为了另一个元素的子元素 而元素本身没有了。 也就是说，消失了。而不是复制 这一点，的确是这样的，但我觉的这个机制很奇怪 就不能是复制么，即1成为了2的子元素，然后1仍然在那里。 不是说需求一般是这样。恰恰相反，需求的确一般都是要删除原来的，比如这个...
JavaScript DOM 中当将一个元素添加到其他的元素中时，原来的元素被删除
ios0213的专栏
05-25 522
代码实现的是讲一个已经存在的p元素添加给div 元素，当实现添加后，原来p元素被删除，添加后的p元素被添加到div元素里面
JS中innerHTML动态绑定的事件丢失
qq_41818857的博客
12-29 3226
JS中innerHTML动态绑定的事件丢失 问题概述： 父元素使用innerHTML在原有的内容下插入新的内容，会导致原来的子元素绑定的事件无效，具体代码如下： <body> <button id="btn">点我</button> <script> var body = document.body; ...
ElementUI的Tree控件在拖动节点时页面元素消失
iTaylorfan的博客
10-13 565
ElementUI，Tree控件节点拖动bug
dom不刷新 vue 加数据后_vue 改变数据DOM不更新，获取不到DOM的解决方法
weixin_39968861的博客
12-21 775
1.vue中$nextTick的用法(获取不到DOM的解决方案)new Vue({ el: '#app', data: { list: [] }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/article'...
记Vue中appendChild加不上class样式到解决
恒Keep毅
10-24 5541
情况复现： 风平日和的一个下午。刚刚转战准备放弃v-if,v-show,v-for复杂绕弯子 准备用appendChild来做一个简单的聊天样式。 结果怎么写样式就是加不上去～人麻了 直接上结论： 如果你遇到了同样的问题，相信你哪有时间看我一步步分析的 结果是： 我拜倒在scoped的脚下???? 因为我是放在组件里面，scoped将其说白了隔离起来了 然后我相当于在页面中不停的加入了空白的class样式，怎么可能成立嘛！ ????这篇文章很好地说明了原理文章地址 问题解决 首先我怀疑????的是 我
vue内appendchild元素后添加类名设置样式不生效问题
最新发布
m0_74138212的博客
11-22 290
第一次遇见这个问题，记录一下，方便以后自己使用。如果是这个原因，你可以把这个类放在单独的一个。里面的类是不生效的。
在js中的appendChild在vue3中如何使用
05-25
在Vue 3中，可以使用 `setup()` 函数中的 `ref` 和 `reactive` 来创建响应式数据，并在模板中使用它们。要向DOM中添加元素，可以使用 `createApp()` 函数的返回值中的 `$el` 属性来获取根DOM节点，并使用原生JS的 `appendChild()` 方法将新元素添加到根节点中。 示例代码如下： ```html <template> <div ref="root"></div> </template> <script> import { ref } from 'vue'; export default { setup() { const root = ref(null); // 在mounted钩子中向root节点添加元素 const mounted = () => { const newElement = document.createElement('div'); newElement.innerHTML = 'Hello World'; root.value.appendChild(newElement); }; return { root, mounted }; }, mounted() { this.mounted(); } }; </script> ``` 在上述示例中，我们在 `setup()` 函数中创建了一个 `ref` 类型的 `root` 变量，它引用了模板中的根节点。然后，我们定义了一个 `mounted()` 函数，在组件挂载后调用该函数，并使用 `appendChild()` 方法向根节点添加了一个新元素。最后，在 `mounted()` 钩子中调用了 `mounted()` 函数以触发添加元素的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cookcyq

请作者喝杯暖暖的奶茶

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值