插入节点(appendChild())
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())的更多相关文章
- 插入节点appendChild()
http://www.imooc.com/code/1698 插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点. 语法: appendChild(newnode ...
- js插入节点appendChild和insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- JS中插入节点的方法appendChild和insertBefore的应用
1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...
- appendChild()插入节点需注意的问题
第一点:首先appendChild插入节点时返回的值是插入的节点本身,另外必须要找到所要插入的父节点: var returnNode = parentNode.appendChild(childNod ...
- JS(JavaScript)插入节点的方法appendChild与insertBefore
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- javascript之DOM编程设置节点插入节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- dom操作------创建节点/插入节点
<section> <div id="box" style="position: relative;"> <p id=" ...
- JavaScript插入节点小结
JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里 ...
- 删除节点与插入节点 & innerHTML
1.测试removeChild()方法: 删除节点dom9.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &q ...
随机推荐
- python3 自己写的一个小算法(比对中文文本相似度)
函数使用说明: 函数的三个参数分别是“匹配语句”,“匹配语料”,“相关度”: 匹配语句,和匹配预料中的语句匹配的语句,必须为字符串: 匹配语料,被匹配语句来匹配的语句列表,必须为列表: 相关度,函数只 ...
- 合并JSON对象的正确方式
一. 前言 “JSON对象合并”是前端开发和 NodeJS 环境开发中非常常见的操作.开发者通常会通过循环遍历或一些库封装的方法或 JavaScript ECMAScript 2015 定义的 Obj ...
- Linux下Redis安装与配置
http://www.cnblogs.com/_popc/p/3684835.html
- HashMap 中的容量与扩容实现,细致入微,值的一品!
前言 开心一刻 巴闭,你的脚怎么会有味道,我要闻闻看是不是好吃的,嗯~~爸比你的脚臭死啦!! …… 高手过招,招招致命 JDK1.8 中 HashMap 的底层实现,我相信大家都能说上来个 一二,底层 ...
- Docker常见报错解决方法记录
[问题一]OCI runtime exec failed......executable file not found in $PATH": unknown [root@localhost ...
- python经典算法题:无重复字符的最长子串
题目:无重复字符的最长子串. 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子 ...
- php递归删除文件夹
php递归删除文件夹 <pre> public function deldir($path) { //如果是目录则继续 if (is_dir($path)) { //扫描一个文件夹内的所有 ...
- centos6的mysql安装
1.安装mysql服务端 yum install mysql-server yum install mysql-devel 2.下载mysql的压缩包 wget http://dev.m ...
- C++中对封装的语法支持——友元
友元 1.友元就是授权给某个函数.每个成员函数.某个类具有访问类内部私有成员的权限. 2.为什么用友元?友元可以允许某个类.函数直接访问类内部私有数据,减少函数调用开销,提高效率. 3.友元函数不是成 ...
- opencv 4 图像处理(漫水填充,图像金字塔与图片尺寸缩放,阈(yu)值化)
漫水填充 实现漫水填充算法:floodFill函数 简单调用范例 #include <opencv2/opencv.hpp> #include <opencv2/imgproc/im ...