插入节点(appendChild())
appendChild():方法将给元素节点追加一个子节点:
reference = element.appendChild(newChild);
如上所示,给定节点newChild将成为给定元素节点element的最后一个子节点,这个方法的返回值是一个新增子节点的引用指针。
这个方法通常与创建新节点的createElement()和createTextNode()方法配合使用。
在下面的例子中,第一条语句用createElement()方法创建了一个para文本段元素,第二条语句用createTextNode()方法创建了一个message文本节点,第三条语句用appendChild()方法把message文本节点插入了para元素节点:
var para = document.createElement("p");
var message = document.createTextNode("hello world");
para.appendChild(message);
接下来在此使用appendChild()方法,但这次把para元素插入文档的结构:
document.body.appendChild(para);
上面的语句把para元素追加给文档中body元素。
新节点可被追加给文档中的任意一个元素。在下例中,我们把新的文本节点追加了当前文档中那个id属性值是headline的元素:
var message = document.createTextNode("hello world");
var container = document.getElementById("headline");
container.appendChild(message);
现在container元素的lastChild属性将被刷新为包含着文本“hello world”的新增文本节点。
appendChild()方法不仅乐意追加新创建元素,还可以用来挪动文档中的现有元素。
在下面的例子中,第一条语句将去寻找id属性值是content的元素,第二条将去寻找id属性值是fineprint的元素,第三条语句将把fineprint元素从他当前位置剪切下来追加到content元素末尾:
var message = document.getElementById("fineprint");
var container = document.getElementById("content");
container.appendChild(message);
注意,id属性值是fineprint的元素将先从文档上被删除,然后在作为content元素的最后一个子节点被重新出插入到新位置。
插入节点(appendChild())的更多相关文章
- 插入节点appendChild()
http://www.imooc.com/code/1698 插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点. 语法: appendChild(newnode ...
- js插入节点appendChild和insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- JS中插入节点的方法appendChild和insertBefore的应用
1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...
- appendChild()插入节点需注意的问题
第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点: var returnNode = parentNode.appendChild(childNod ...
- JS(JavaScript)插入节点的方法appendChild与insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- javascript之DOM编程设置节点插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- dom操作------创建节点/插入节点
<section> <div id="box" style="position: relative;"> <p id=" ...
- JavaScript插入节点小结
JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里 ...
- 删除节点与插入节点 & innerHTML
1.测试removeChild()方法: 删除节点dom9.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...
随机推荐
- Alpha阶段--第六周Scrum Meeting
任务内容 本次会议为第六周的Scrum Meeting会议 召开时间为周四上午10点,在信南B317召开,召开时间约为30分钟,进行的项目规划和分工 队员 任务 张孟宇 进行用户登录界面的代码编写 吴 ...
- GStreamer基础教程12 - 常用命令工具
摘要 GStreamer提供了不同的命令行工具用于快速的查看信息以及验证Pipeline的是否能够正确运行,在平时的开发过程中,我们也优先使用GStreamer的命令行工具验证,再将Pipeline集 ...
- 【并发编程】Volatile原理和使用场景解析
目录 一个简单列子 Java内存模型 缓存不一致问题 并发编程中的"三性" 使用volatile来解决共享变量可见性 volatile和指令重排(有序性) volatile和原子性 ...
- Java 用单向循环链表实现 约瑟夫问题
public class lianbiao2 { class Node{ Node next; int number; public Node getNext() { return next; } p ...
- jieba分词基础知识
安装:pip install jieba 导包:import jieba 精确模式:试图将句子最精确地切开,适合文本分析(很像人类一样去分词) jieba.cut(字符串) --> 返回生成器 ...
- Java多线程中join、yield、sleep方法详解
在Java多线程编程中,Thread类是其中一个核心和关键的角色.因此,对该类中一些基础常用方法的理解和熟练使用是开发多线程代码的基础.本篇主要总结一下Thread中常用的一些静态方法的含义及代码中的 ...
- python学习之【第五篇】:Python中的元组及其所具有的方法
1.前言 Python的元组(tuple)与列表很相似,不同之处在于元组不能被修改,即元组一旦创建,就不能向元组中的增加新元素,不能删除元素中的元素,更不能修改元组中元素.但是元组可以访问任意元素,可 ...
- 获取Ubuntu的Docker CE
Docker文档 Docker提供了一种在容器中运行安全隔离的应用程序的方法,它与所有依赖项和库打包在一起. 获取Ubuntu的Docker CE 一.OS要求 需要以下Ubuntu版本的x86_64 ...
- 生活问题 | 对华为畅玩手机5X进行升级
步骤一:准备一张SD卡,建议使用Sandisk, Kingstone, 或Kingmax,大小建议在2G KIW-AL10C00B258 软件版本升级指导书 Secret 2016-11-25 Hu ...
- Medium高赞系列,如何正确的在Stack Overflow提问
在我们写程序的时候,经常会遇到各色各样的问题,在国内,小伙伴们经常去知乎.CSDN.博客园.思否.安卓巴士等地方提问并获得答案. 这些地方汇集了很多优秀的.爱分享的国内资源.小编比较自豪的一件事情就是 ...