JS(JavaScript)插入节点的方法appendChild与insertBefore
首先 从定义来理解 这两个方法:
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)
相同之处:插入子节点
不同之处:实现原理方法不同。
appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。
insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。
来看个这个简单的实例:在id为box-con 的末尾添加一个子节点div
<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>
<div id="box-one">
<p class="con2" id="p1"></p>
<p class="con2"></p>
<p class="con2"></p>
</div>
window.onload =function () {
var btn = document.getElementById("creatbtn"); btn.onclick =function() {
insertEle();
}
}
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div"); newNode.innerHTML =" This is a newcon ";
//oTest.appendChild(newNode);
oTeset.insertBefore(newNode,null); // 这两种方法均可实现 }
这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写呢
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1"); newNode.innerHTML =" This is a newcon ";
oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面 }
或者
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1"); newNode.innerHTML =" This is a newcon ";
oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面,
也就是说 插入id为P1节点元素的后面。 }
这里想说的是 nextSibling :某个元素之后紧跟的元素(处于同一树层级中)。
reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
JS(JavaScript)插入节点的方法appendChild与insertBefore的更多相关文章
- JS中插入节点的方法appendChild和insertBefore的应用
1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...
- 将JavaScript 插入网页的方法
将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...
- js:插入节点appendChild insertBefore使用方法
首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...
- JavaScript插入节点小结
JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里 ...
- JS常用操作节点的方法
js常见的创建dom节点的方法有 createElement() 创建一个元素节点 => 接收参数为string类型的nodename createTextNode() 创建一个文本节点 =&g ...
- JQ 添加节点和插入节点的方法总结
转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...
- JS添加父节点的方法。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript插入节点
1. document.write("<p>This is inserted.</p>"); 该方法必须加在HTML文档内,违背了结构行为分离原则,不推荐. ...
- jQuery插入节点的方法
注:摘自<锋利的jQuery(第二版)> append() 向每个匹配的元素内部追加内容: HTML代码:<p>我想说:</p>jQuery代码:$(" ...
随机推荐
- 服务器安装LNMP及构建个人站点
服务器安装LNMP(centos6.6+nginx1.7.12+mysql5.6.24+php5.6.7) 本次安装 centos6.6+nginx1.7.12+mysql5.6.24+php5.6 ...
- Subversion、TortoiseSVN、Ankhsvn+VS使用
Subversion为版本控制软件的服务器端.VisualSVN Server 可以在Windows平台安装和管理全功能的Subversion server. TortoiseSVN为Subversi ...
- 4种Java日志管理方法
java开发中常见的几种日志管理方案有以下4种: 1. Commons-logging + log4j 2. log4j 3. slf4j + log4j + commmons-logging 4. ...
- linux下统计目录下所有子目录的大小
du -sh * --exclude=tar |awk '{v=substr($1,length($1),1)}v=="G"{$0="1G "$0}v==&qu ...
- [SDOI2009]HH的项链(莫队)
嘟嘟嘟 这题原本莫队能过,自从某谷加强数据后好像就只能80了. 但这并不重要. (其实写这篇博客只是想记录一下莫队板子) 莫队,总而言之,离线,排序,暴力. #include<cstdio> ...
- CVE-2017-8046 复现与分析
环境搭建 使用的项目为https://github.com/spring-guides/gs-accessing-data-rest.git里面的complete,直接用IDEA导入,并修改pom.x ...
- Hadoop学习之路(八)在eclispe上搭建Hadoop开发环境
一.添加插件 将hadoop-eclipse-plugin-2.7.5.jar放入eclipse的plugins文件夹中 二.在Windows上安装Hadoop2.7.5 版本最好与Linux集群中的 ...
- Linux终端里的记录器
我们在调试程序的时候,免不了要去抓一些 log ,然后进行分析. 如果 log 量不是很大的话,那很简单,只需简单的复制粘贴就好. 但是如果做一些压力测试,产生大量 log ,而且系统内存又比较小(比 ...
- python matplotlib quiver——画箭头、风场
理解参考:https://blog.csdn.net/liuchengzimozigreat/article/details/84566650 以下实例 import numpy as np impo ...
- TortoiseGit需要重复填写用户名和密码的问题
命令行执行: git config --global credential.helper store 即可