appendchild 被追加页面元素 消失

最新推荐文章于 2023-02-19 09:37:07 发布
最新推荐文章于 2023-02-19 09:37:07 发布
阅读量485 收藏
点赞数
文章标签： c#
原文链接：http://www.cnblogs.com/101rico/archive/2013/01/26/2878362.html
版权

一般都是自己创建元素然后append到页面的

但是如果是页面本身有的元素append到另一个页面元素呢？

貌似是：

元素的确成为了另一个元素的子元素

而元素本身没有了。

也就是说，消失了。而不是复制

这一点，的确是这样的，但我觉的这个机制很奇怪

就不能是复制么，即1成为了2的子元素，然后1仍然在那里。

不是说需求一般是这样。恰恰相反，需求的确一般都是要删除原来的，比如这个案例

但是从逻辑上想想都是：先是append了，然后我们自己去删除掉原来的1元素

现在倒好，append还有自带有remove功能。

要注意。

 

转载于:https://www.cnblogs.com/101rico/archive/2013/01/26/2878362.html

weixin_30629977
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue内appendchild元素后添加类名设置样式不生效问题
m0_74138212的博客
11-22 342
第一次遇见这个问题，记录一下，方便以后自己使用。如果是这个原因，你可以把这个类放在单独的一个。里面的类是不生效的。
JQuery中append和JS中appendChild添加重复元素问题
qq_45955580的博客
04-08 4520
所有的追加元素方法都会去判断这个父元素里面是否拥有这个元素对象，如果拥有则以为已经添加完成，如果没有则添加进去，这也就是为什么我们只添加了一个元素的原因
vue数组改变但是页面不更新的解决方案
是我的温柔啊
05-11 6850
分类 1、由于javascript的限制，某些情况vue会监听不到数组的变化，例如：items[index] = newitem 2、或者是数组结构过于复杂和深度过深，也可能导致更新出现问题。 解决方案 1、当使用items[index] = newitem这类写法，页面监听不到数组变化，可修改写法：this.$set(this.items,index,newitem) 2、当是结构复杂或深度过深时，可采用此方法： 首先定义一个变量为keyDate: 0 在数组变化，需要更新页面的地方加上个绑定的:key=
JS中appendChild问题
zyy_0725的博客
09-25 1534
appendChild是将实现搬家，而不是复制。
Js & Vue 使用 appendChild 后源元素(节点)消失了
cookcyq__的博客
11-24 1493
据官方文档 [https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild] 里面的开头说明： 明确指出源节点消失是引用问题，要想保留源(元素)节点可以使用 Node.cloneNode(true) 属性，其中 true 表示深拷贝。 ...
一个页面元素appendchild追加到另一个页面元素的问题
09-05
因此，当一个元素被追加到其他元素后，它将不再存在于原来的位置。 举个例子，假设我们有以下HTML结构： ```html <div id="child"></div> <div id="parent2"></div> ``` 如果我们执行以下JavaScript代码： ``...
javascript使用appendChild追加节点实例
10-24
主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
JS中appendChild追加子节点无效的解决方法
10-17
因此，当我们第一次调用`appendChild`时，`btn`被添加到第一个`.test`元素中；当尝试将其添加到第二个`.test`元素时，由于`btn`已经有了父节点，它实际上是从第一个`.test`元素中移除并添加到第二个`.test`元素。...
动态生成页面元素的代码
10-31
此外，`appendChild`方法用于将新创建的元素添加到DOM树的指定位置。在动态生成页面元素时，理解如何操作DOM（Document Object Model）是至关重要的。 总结一下，动态生成页面元素是JavaScript在前端开发中的基本...
appendChild方法详解
weixin_33989780的博客
10-28 573
方法：target.appendChild(ele); 执行该方法时，会发生两部操作： 1、将元素ele从原来的父元素中移除掉 2、将元素追加至新的目标元素中，并且保留元素的所有样式信息和事件、、。 将一个元素ele追加至另一个元素Div中时，默认会将该元素从原来元素中移除掉，并且该元素的样式信息、事件绑定等都会保留。 示例如下： 将div11追加到下面的div区域，则会...
原生js中的对元素的添加,删除,复制,创建等操作.
xhdjdje的博客
02-19 3606
使用原生js来对元素进行创建,删除,复制,添加等操作
JavaScript DOM 中当将一个元素添加到其他的元素中时，原来的元素被删除
ios0213的专栏
05-25 529
代码实现的是讲一个已经存在的p元素添加给div 元素，当实现添加后，原来p元素被删除，添加后的p元素被添加到div元素里面
【JavaScript】appendChild一个的注意点之会删除原dom树节点
qq_43248623的博客
04-08 1020
最近在研究学习vue原理，其中使用createDocumentFragment()方法，是用来创建一个虚拟的节点对象，那问题来了，创建了虚拟dom树，且最后只渲染了虚拟dom树里面的节点，那原dom树的节点去哪里了，查阅了MDN等相关资料，发现是appendChild在搞搞震。 首先看一下MDN上对appendChild的定义： Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中，那么 appendChild() 只会将
append节点原节点消失 clone
勋勋勋勋小勋勋的博客
01-06 281
clone() 方法，调用clone()方法可以生成一个被选元素的副本，复制了一个被选元素 $('.class').append($('#id').clone(true));
JS DOM元素的增删改
weixin_45060872的博客
03-22 401
JS DOM元素的增删改DOM元素动态操作向页面添加元素appendChildinsertBeforeDOM元素动态操作向页面删除元素removeChidDOM元素动态操作向页面修改元素案例 DOM元素动态操作向页面添加元素 除了document.write、innerHTML、document.createElement(“标签名”) 直接在页面创建元素外， 还可以用appendChild和in...
解决微前端qiankun中子应用(element组件动态加载的元素)样式丢失的问题
duansamve的博客
06-05 6778
项目使用了微前端qiankun，子应用中使用的是element组件库，当有el-select组件的子应用插入父应用的弹窗中初看效果是正常的，但是当点击el-select组件时发现组件下拉框中下拉列表样式丢失，后来在主应用中查看源码发现动态加载的el-select下拉列表DOM是动态插入到主应用中，因为在qiankun中应用间的样式是隔离的导致下拉列表没有样式，于是重写了document.body.appendChild方法.........
在IE中使用appendChild向中增加到中不会显示的技巧
anwanfu的专栏
05-09 1401
如果使用appendChild向中增加到中，则在IE中这一行并不会出现，但在其它浏览器中却会显示出来。可以将元素增加到表的元素中。这种方法可以在所有的浏览器中正常工作，如下例所示。                        First name:                                        Middle name:                   
vue 如何给一个元素追加指定页面元素
最新发布
06-06
在Vue中，可以使用v-if和v-for指令来控制元素的显示和追加指定的页面元素。 例如，可以创建一个数组来存储需要追加的元素，然后使用v-for指令将它们渲染到页面上，如下所示： ``` <template> <div> <div v-for="item in items" :key="item.id"> {{ item.text }} </div> <button @click="addItem">添加元素</button> </div> </template> <script> export default { data() { return { items: [ { id: 1, text: '元素1' }, { id: 2, text: '元素2' }, { id: 3, text: '元素3' }, ] } }, methods: { addItem() { const newItem = { id: 4, text: '元素4' } this.items.push(newItem) } } } </script> ``` 在上面的代码中，我们使用v-for指令将items数组中的元素渲染到页面上。当点击添加元素按钮时，会向items数组中添加一个新的元素，从而实现了向页面追加指定元素的效果。 另外，如果需要在指定位置追加元素，可以使用Vue的ref特性，将元素标记为一个引用，然后通过JavaScript代码获取到该引用，再使用appendChild()方法将需要追加的元素添加到该引用的父元素中。例如： ``` <template> <div> <div ref="myDiv"></div> <button @click="addElem">添加元素</button> </div> </template> <script> export default { methods: { addElem() { const newElem = document.createElement('div') newElem.innerHTML = '我是新元素' this.$refs.myDiv.parentNode.appendChild(newElem) } } } </script> ``` 在上面的代码中，我们使用ref特性将一个元素标记为myDiv引用，然后在addElem方法中获取该引用，并使用appendChild()方法将一个新的元素添加到myDiv元素的父元素中，从而实现了向指定位置追加元素的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值