Node.appendChild
Node.appendChild
Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么 appendChild() 只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。
这意味着,一个节点不可能同时出现在文档的不同位置。所以,如果某个节点已经拥有父节点,在被传递给此方法后,它首先会被移除,再被插入到新的位置。若要保留已在文档中的节点,可以先使用 Node.cloneNode() 方法来为它创建一个副本,再将副本附加到目标父节点下。请注意,用 cloneNode 制作的副本不会自动保持同步。
如果给定的子节点是 DocumentFragment,那么 DocumentFragment 的全部内容将转移到指定父节点的子节点列表中。
有更加新的 API 可供使用! ParentNode.append() 方法支持多个参数,接受字符串作为参数,会将字符串转换为文本节点再附加。
语法
element.appendChild(aChild)
参数
aChild
要追加给父节点(通常为一个元素)的节点。
返回值
返回追加后的子节点 (aChild),除非 aChild 是一个文档片段(DocumentFragment),这种情况下将返回空文档片段(DocumentFragment)。
附注
如果你需要保留这个子节点在原先位置的显示,则你需要先用Node.cloneNode方法复制出一个节点的副本,然后在插入到新位置.
这个方法只能将某个子节点插入到同一个文档的其他位置,如果你想跨文档插入,你需要先调用document.importNode方法.
备注
由于 appendChild() 返回的是被附加的子元素,所以链式调用可能无法按照你的预期去执行:
let aBlock = document.createElement('block').appendChild( document.createElement('b') );
(上述代码)只会将 aBlock 设置为 <b></b> ,这可能不是你所想要的。
示例
// 创建一个新的段落元素 <p>,然后添加到 <body> 的最尾部
var p = document.createElement("p");
document.body.appendChild(p);
Node.appendChild相关推荐
- HTML DOM appendChild() 方法
1. 1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <ul id="myList"><li& ...
- Node.js 体验-在Windows Azure工作者角色上托管Node.js
在我的前面的文章中我演示了如何在Windows Azure 网站(即WAWS)上开发和部署Node.js 应用程序.WAWS是Windows Azure 平台中的新功能.因为它是低成本, 同时它提供I ...
- jq 给节点node加事件_JavaScript 原生对象、属性、方法、事件、事件参数
/*** 事件参考 https://developer.mozilla.org/zh-CN/docs/Web/Events* Event <- UIEvent <- MouseEvent* ...
- 【JavaScript】appendChild一个的注意点之会删除原dom树节点
最近在研究学习vue原理,其中使用createDocumentFragment()方法,是用来创建一个虚拟的节点对象,那问题来了,创建了虚拟dom树,且最后只渲染了虚拟dom树里面的节点,那原dom树 ...
- html添加子节点方法,HTML DOM appendChild() 方法
HTML DOM appendChild() 方法 appendChild()方法的作用是:在指定父节点的子节点列表的末尾添加一个节点. 如果给定的子节点是文档中现有节点的引用,appendChild ...
- javascript Node对象
属性 属性 描述 读写 Node.baseURI DOMString 只读 Node.childNodes NodeList 只读 Node.firstChild Node 只读 Node.isCon ...
- appendChild+insertBefore:创建和添加节点
创建和添加节点 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
- JavaScript中的appendChild()方法
1.appendChild() 方法可向节点的子节点列表的末尾添加新的子节点. 实例一: <!DOCTYPE html> <html> <head> <met ...
- appendChild()方法
appendChild() 方法可向节点的子节点列表的末尾添加新的子节点 例一:向ul中添加li项 代码段: <body><ul id="myList">& ...
最新文章
- CVPR2020人脸防伪检测挑战赛冠军方案开源
- mysql 查询优化实验报告_Mysql查询优化小结
- Google怎么用linux
- PyQt5 技术篇-设置窗口置顶不生效问题原因,setWindowFlags()设置参数后不生效解决办法
- xubuntu沒有登錄輸入框,左上角出現白色方框,解決方案
- mysql架构 视频_企业常见MySQL架构应用实战(高可用集群系统+调优经验)视频课程...
- Bootstrap3 表格样式
- An efficient and robust line segment matching approach based on LBD descriptor and pairwise geometri
- C++::My Effective C++
- ORACLE的Copy命令和create table,insert into的比较
- Java Web下访问外部jar,实例后的Object类型转化的问题
- PyQt+QtDesigner及相关插件的安装和设置
- 计算机体系结构和计算机组成哪个重要,计算机组成和体系结构教学初探.doc
- wps文档设置页眉左右(奇偶页)不同内容
- SICP第一章:构造过程抽象(1.1)
- java段子_Java程序员的内涵段子
- 茶 与 茶道 之 人生如茶
- kindle亚马逊个人文档不显示_Kindle 没东西看?一个插件就搞定!
- java+websocket实现网页聊天室
- 方波的产生——运算放大器LM324产生方波
热门文章
- 数字信号处理课程设计——调制与解调
- 芝诺悖论:“人永远追不上乌龟” p.s.飞箭不动悖论
- 554砖墙(哈希表)
- FOT基于Extended-RIC模型的参数估计说明
- 山东大学为“学伴”道歉了,但很多质疑仍未回应
- 水平居中和垂直居中的实现
- 苏生:“月入三万”的背后,竟然是......
- ⑤电子产品拆解分析-人体感应灯
- c语言实现上下左右移动,C语言实现矩阵翻转(上下翻转、左右翻转)分享
- 【NOI2022省选挑战赛 Contest11 A】魔法球(二分)