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. php从数据库获取数据并遍历在表格中

    <?php /*连接数据库并以一个数组的形式获得数据*/ header("Content-type:text/html;charset=UTF-8"); $con = mys ...

  2. [Hadoop]Hive-1.2.x安装配置+Mysql安装

    HIve的元数据存储在mysql中,需要配置与MySQL建立连接,除了安装MySQL外还要安装连接的jar包:mysql-connector-java-5.1.47.tar.gz   安装环境:Cen ...

  3. [考试反思]0919csp-s模拟测试47:苦难

    ISOLATION 也不粘上面的了,先管好自己. 附了个近期总分,可以看出什么. 反思一下考试心态: 开场看题目,T1傻逼题不用脑子,T2傻逼板子,T3... 这T3是啥啊?没看懂题目啊?再看一遍.啥 ...

  4. Mybaits 源码解析 (十)----- 全网最详细,没有之一:Spring-Mybatis框架使用与源码解析

    在前面几篇文章中我们主要分析了Mybatis的单独使用,在实际在常规项目开发中,大部分都会使用mybatis与Spring结合起来使用,毕竟现在不用Spring开发的项目实在太少了.本篇文章便来介绍下 ...

  5. 七月月赛T2

    题目描述 “X龙珠”是一款益智小游戏.游戏中有 n(2∣n) 个编号互不相同龙珠按照给定的顺序排成一个队列,每个龙珠上面都有一个编号.每次操作时,选择并取出龙珠队列中相邻的两个龙珠,放到目标队列的末尾 ...

  6. 洛谷 pP2146 [NOI2015]软件包管理器

    题目的传送门 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...

  7. win10系统任务栏点击没有反应

    今天碰到了一个神奇的bug任务栏上的图标怎么也没反应,鼠标点击不了,win+R命令行也出来不了. 经过一番研究,发现CTRL+ALT+DEL,可以打开任务管理器.所以来了一番操作: 1.先打开任务管理 ...

  8. 【vue】在VS Code中调试Jest单元测试

    在VS Code中调试Jest单元测试 添加调试任务 打开 vscode launch.json 文件,在 configurations 内加入下面代码 "configurations&qu ...

  9. Android9.0 SystemUI 网络信号栏定制修改

    前情提要 Android 8.1平台SystemUI 导航栏加载流程解析 9.0 改动点简要说明 1.新增 StatusBarMobileView 替代 SignalClusterView,用以控制信 ...

  10. 详解Spring Security的formLogin登录认证模式

    一.formLogin的应用场景 在本专栏之前的文章中,已经给大家介绍过Spring Security的HttpBasic模式,该模式比较简单,只是进行了通过携带Http的Header进行简单的登录验 ...