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())的更多相关文章

  1. 插入节点appendChild()

    http://www.imooc.com/code/1698 插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点. 语法: appendChild(newnode ...

  2. js插入节点appendChild和insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  3. js:插入节点appendChild insertBefore使用方法

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  4. JS中插入节点的方法appendChild和insertBefore的应用

    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...

  5. appendChild()插入节点需注意的问题

    第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点: var returnNode = parentNode.appendChild(childNod ...

  6. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  7. javascript之DOM编程设置节点插入节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. dom操作------创建节点/插入节点

    <section> <div id="box" style="position: relative;"> <p id=" ...

  9. JavaScript插入节点小结

    JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里 ...

  10. 删除节点与插入节点 & innerHTML

    1.测试removeChild()方法: 删除节点dom9.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...

随机推荐

  1. iOS开发 swift 3dTouch实现 附代码

    iOS开发 swift 3dTouch实现 附代码 一.What? 从iphone6s开始,苹果手机加入了3d touch技术,最简单的理解就是可以读取用户的点击屏幕力度大小,根据力度大小给予不同的反 ...

  2. spring-boot-plus V1.4.0发布 集成用户角色权限部门管理

    RBAC用户角色权限 用户角色权限部门管理核心接口介绍 Shiro权限配置

  3. Java面向对象的三大特征和五大原则

    Java面向对象的三大特征 封装 封装(Encapsulation)是指属性私有化,根据需要提供setter和getter方法来访问属性.即隐藏具体属性和实现细节,仅对外开放接口,控制程序中属性的访问 ...

  4. python基础-字典dict

    字典-dict 用途: 定义方法:通过{} 来存储数据,通过key:value (键值对)来存储数据,每个键值对通过逗号分隔.在键值对中,key 是不可变的数据类型,value 是任意数据类型 def ...

  5. OA权限设计

    Action表,有多少个Action,就有多少个记录; UserAction表,记录条数 = User数 * Action数,用于最终确定用于能否请求某个action Role角色表,自定义条数; R ...

  6. 通俗易懂了解Vue内置组件keep-alive内部原理

    1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...

  7. [转载]【转】教你如何实现linux和Windows之间的文件共享,samba的安

    原文地址:[转]教你如何实现linux和Windows之间的文件共享,samba的安装与配置作者:铅笔小蜡 本人在虚拟机下装fedora13,已经实现.1. 首先检查os是否安装好了samba. [r ...

  8. 为什么我加了索引,SQL执行还是这么慢(一)?

    在MySQL中,有一些语句即使逻辑相同,执行起来的性能差异确实极大的. 先抛出一个结论:如果想使用索引树搜索功能,就不能使用数据库函数来处理索引字段值,而是在不改变索引字段值的同时,自己通过SQL语句 ...

  9. Genymotion模拟器安装搜狗输入法

    Genymotion模拟器默认没有中文输入法,如果在一些调试中涉及到需要输入中文则必须需要安装中文输入法. 这里以搜狗输入法为例. 这里需要注意一下几点就行: 百度下载一个搜狗输入法,需要特别注意的是 ...

  10. 阿里云开源 image-syncer 工具,容器镜像迁移同步的终极利器

    为什么要做这个工具? 由于阿里云上的容器服务 ACK 在使用成本.运维成本.方便性.长期稳定性上大大超过公司自建自维护 Kubernets 集群,有不少公司纷纷想把之前自己维护 Kubernetes ...