appendChild追加元素问题

scq000 发布于2019-08-20 18:16 / 1405人阅读

摘要：问题在写东西的时候用为标签两次追加相同内容，结果却页面只出现了一个标签原因是把一个元素对象追到到另一个元素上，但是这个追加其实是剪切的意思。也就是说，如果追加同一个元素对象，实际上只是追加了一个元素，这就是我所出现的那个问题。

问题

在写东西的时候用appendChild为li标签两次追加相同内容，结果却页面只出现了一个li标签

原因

appengChild是把一个元素（对象）追到到另一个元素上，但是这个追加其实是"剪切"的意思。也就是说，如果追加同一个元素（对象），实际上只是追加了一个元素，这就是我所出现的那个问题。

效果如图：多次追加同一元素（对象），页面只出现一个

或者换个方式来说，用appendChild为ul追加了一个li标签，li标签里面的内容是a，然后又追加了一个li，内容是b，再把内容为a的li标签重新追加一次，你会发现原来页面是a,b，但是现在却变成了b,a。

效果如下：

预期效果是a、b、a，但实际却是b、a。这就是所说的appendChild追加是一种"剪切"效果。追加同一个元素，第二次以后追加的不是没有作用，而是为只是处理同一个元素（对象），这样就会把之前有过一样的元素直接拿过来用，所以顺序不一样，就相当于"剪切"。

解决办法

写一个创建DOM对象函数，每次追加调用该函数

使用克隆节点（cloneNode）

创建函数如下：

效果如图：

克隆节点如下：

效果跟第种方法一样。

GPU云服务器云服务器在元素前追加html js在从前追加元素 js 元素后追加内容元素 type问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84279.html

原生JS操作DOM

摘要：能够改变页面中的所有元素能够改变页面中的所有属性能够改变页面中的所有样式能够对页面中的所有事件做出反应我们需要通过操作元素，查找这些元素有三种方法通过查找通过标签名查找通过类名查找允许改变元素的内容。，如使有能力对事件做出反应。通过html dom可以访问javascript html文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Mo...

anRui 2019-08-20 14:49 评论0 收藏0
原生JS操作DOM

摘要：能够改变页面中的所有元素能够改变页面中的所有属性能够改变页面中的所有样式能够对页面中的所有事件做出反应我们需要通过操作元素，查找这些元素有三种方法通过查找通过标签名查找通过类名查找允许改变元素的内容。，如使有能力对事件做出反应。通过html dom可以访问javascript html文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Mo...

ISherry 2019-08-01 16:26 评论0 收藏0
动态生成html元素并为元素追加属性

摘要：动态生成元素的方法有三种第一种创建元素，再用方法将元素添加到指定节点登录第二种使用直接将元素添加到指定节点使用将元素直接添加到指定节点登录第三种创建节点中创建对象，使用的工厂函数完成，格式如下，会根据传入的标记字符串，创建一个对象动态生成HTML元素的方法有三种：第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点 ...

番茄西红柿 2019-04-23 13:31 评论0 收藏0
JavaScript实现左右点击切换图片具体代码

　　项目中要求实现左右点击切换图片，先看看想要展示效果：　　效果：　　HTML　　<!DOCTYPEhtml> 　　<html> 　　<head> 　　<metacharset="utf-8"> 　　<title>xxx——空间相册</title> 　　<linkrel="styleshee...

3403771864 2022-10-27 21:26 评论0 收藏0
还不打算去认识一下webpack?

摘要：前言随我来去看看为时未晚第一版较浅显的知识懂得可忽略本文方向安装起步搭建运行粗略代过对于资源的管理对于输出的管理举例介绍本地开发基础服务热更新模块热替换初步认识初步构建新建一个文件并进入更目录是命令初始一个文件表示跳过询问步骤安装前言随我来,去看看webpack!(为时未晚)============》第一版(较浅显的知识,懂得可忽略本文) 方向安装,起步搭建运行. (粗略代...

Tony_Zby 2019-08-23 12:51 评论0 收藏0