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. SpringBoot 2.0 开发案例之百倍级减肥瘦身之旅

    前言 为了存我的小黄图,最近在做一款图床服务,集成了各种第三方云存储服务,目前正在内部测试阶段.项目是以Jar的形式运行在腾讯云上,不要问我为什么使用腾讯云了,因为阿里云老用户和狗不得入内. 问题凸显 ...

  2. SpringBoot是如何加载配置文件的?

    前言 本文针对版本2.2.0.RELEASE来分析SpringBoot的配置处理源码,通过查看SpringBoot的源码来弄清楚一些常见的问题比如: SpringBoot从哪里开始加载配置文件? Sp ...

  3. SpringCloud 中集成Sentinel+Feign实现服务熔断降级

    Sentine 1.背景 Sentinel 是阿里中间件团队开源的,面向分布式服务架构的轻量级高可用流量控制组件,主要以流量为切入点,从流量控制.熔断降级.系统负载保护等多个维度来帮助用户保护服务的稳 ...

  4. Go 程序的性能监控与分析 pprof

    你有没有考虑过,你的goroutines是如何被go的runtime系统调度的?是否尝试理解过为什么在程序中增加了并发,但并没有给它带来更好的性能?go执行跟踪程序可以帮助回答这些疑问,还有其他和其有 ...

  5. 考试T2修剪草坪

    传送门 这题的DP真是刷新了我的理解,竟然还要用队列优化.... #include<iostream> #include<cstdio> using namespace std ...

  6. m101 真*sb($\huge 全场最瞎$)

    不想说这场考试,T1全场切,但是我: T3全场30,但是: 鬼知道我为什么敲的是p*p啊(而且还炸精了!) kuku----! $\huge 全场最瞎$

  7. 通俗地说逻辑回归【Logistic regression】算法(二)sklearn逻辑回归实战

    前情提要: 通俗地说逻辑回归[Logistic regression]算法(一) 逻辑回归模型原理介绍 上一篇主要介绍了逻辑回归中,相对理论化的知识,这次主要是对上篇做一点点补充,以及介绍sklear ...

  8. 『题解』洛谷P3958 奶酪

    Portal Portal1: Luogu Portal2: LibreOJ Portal3: Vijos Description 现有一块大奶酪,它的高度为\(h\),它的长度和宽度我们可以认为是无 ...

  9. 创建windows系统下的虚拟机

    创建新的虚拟机  添加映像(windows系统下必须先添加映像) 选择相应的镜像文件:网上查找密钥输入:版本按要求选择:单击 下一步:设置虚拟机名称  位置 :下一步 默认的磁盘大小(不用管)——下一 ...

  10. Vue基础系列(三)——Vue模板中的数据绑定语法

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...