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. CentOS生产环境无网络安装percona-xtrabackup2.4【RPM安装教程】

    Percona XtraBackup 8.0不支持对在MySQL 8.0之前的版本,Percona Server for MySQL或 Percona XtraDB Cluster中创建的数据库进行备 ...

  2. [Jupyter Notebook]Notebook添加Ancona虚拟环境

    1.首先安装ipykernel:conda install ipykernel 解决安装ipykernel权限报错问题 wangbin@Skyell_Cloud:~$ sudo chown -R wa ...

  3. 【Java实践】Kettle从一次实验说起

    一,安装Kettle 1,关于简易安装Kettle 第一次接触kettle(以前只是听过罢了),摸索了几天,在mac源码安装失败,转而快速安装.在mac上安装最新版kettle并成功启动代码如下: ☁ ...

  4. 原生JS实现二叉搜索树(Binary Search Tree)

    1.简述 二叉搜索树树(Binary Search Tree),它或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值: 若它的右子树不空,则右子 ...

  5. 8*8LED点阵

    基础认识 1.5英寸LED点阵管数码管8*8红色16pin 有如下两种型号: 共阳1588BS 共阴1588AS 共阴1588AS 共阳1588BS 编程导向 共阴和共阳其编程思路基本类似,只是对应I ...

  6. Linux基础知识回顾

    1.描述计算机的组成及其功能 计算机是由计算机软件系统和计算机硬件系统两大系统组成 计算机硬件组成 1946年数学家冯诺依曼提出,计算机硬件由运算器.控制器.存储器.输入设备和输出设备5大部件组成,如 ...

  7. 使用 Scrapy 爬取去哪儿网景区信息

    Scrapy 是一个使用 Python 语言开发,为了爬取网站数据,提取结构性数据而编写的应用框架,它用途广泛,比如:数据挖掘.监测和自动化测试.安装使用终端命令 pip install Scrapy ...

  8. Docker学习-Kubernetes - 集群部署

    Docker学习 Docker学习-VMware Workstation 本地多台虚拟机互通,主机网络互通搭建 Docker学习-Docker搭建Consul集群 Docker学习-简单的私有Dock ...

  9. 【Linux系列】Centos 7安装以及网络配置(一)

    目的 本文主要介绍以下两点: 一. 如何在Oracle VM VirtualBox安装centos(已有VirtualBox) 二. 如何在内网里实现虚拟机访问外网.物理主机以及物理主机访问虚拟机 一 ...

  10. Linux 解决ntfs文件系统问题,支持外设(U盘等设备)的即插即拔

    # rpm -q fuse //查看这个软件有没有安装,一般安装系统都会装(最小安装例外) fuse-2.9.2-10.el7.x86_64 # yum -y install gcc # wget h ...