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. 构建企业级数据湖?Azure Data Lake Storage Gen2实战体验(下)

    相较传统的重量级OLAP数据仓库,“数据湖”以其数据体量大.综合成本低.支持非结构化数据.查询灵活多变等特点,受到越来越多企业的青睐,逐渐成为了现代数据平台的核心和架构范式. 作为微软Azure上最新 ...

  2. 基于 HTML5 + WebGL 实现 3D 可视化地铁系统

    前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...

  3. python基础-列表List及内置方法

    数据类型之列表-List 用途:用于存一个或多个不同类型的值 定义:通过中括号存值,每个值之间通过逗号进行分隔 l1 = [1,'a',3,'b'] 特性:有序.可变.存多个值的数据类型 常用方法: ...

  4. MIT线性代数:14.正交向量和子空间

  5. [2018-06-28] 创建第一个django项目

    1.创建一个名称为tmpl的项目 django-admin.py startproject tmpl 2.进入刚刚创建的tmpl目录 cd tmpl 3.创建一个名称为learn的应用 python ...

  6. SpringBoot之集成MyBatis

    引入工程依赖包 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. Ubuntu18.04系统下安装Pycharm&vim设置自动缩进及默认显示行号

    Ubuntu18.04系统自带python3.6及python2.7,Pycharm是一款非常强大的IDE.目前Pycharm有两个版本:专业版和Community社区,区别是专业版是收费,而且功能更 ...

  8. [考试反思]0903NOIP模拟测试36:复始

    因为多次被说颓博客时间太长于是 真香 恢复粘排行榜的传统. 大体上就是,T1A的前三,剩下的T2A的排名,再然后按照T3暴力得分排名. T1是个暴力.3个A的5个得分的.数据点极强爆零率极高. 我的思 ...

  9. Python文字转换语音,让你的文字会「说话」,抠脚大汉秒变撒娇萌妹

    作者 | pk 哥 来源公众号 | Python知识圈(ID:PythonCircle) APP 也有文字转换为语音的功能,虽然听起来很别扭,但是基本能解决长辈们看不清文字或者眼睛疲劳,通过文字转换为 ...

  10. python学习之【第五篇】:Python中的元组及其所具有的方法

    1.前言 Python的元组(tuple)与列表很相似,不同之处在于元组不能被修改,即元组一旦创建,就不能向元组中的增加新元素,不能删除元素中的元素,更不能修改元组中元素.但是元组可以访问任意元素,可 ...