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代码:$(" ...
随机推荐
- RESTful 架构基础
源自:https://mp.weixin.qq.com/s/wEr2jAVphzB1G_MISlLU0w REST(Representational State Transfer)架构风格是一种世界观 ...
- 解决由于显卡驱动BUG导致桌面右键卡顿的问题:bat文件源码
@ ECHO OFF%1 mshta vbscript:CreateObject("Shell.Application").ShellExecute("cmd.exe&q ...
- 网络编程--Socket(套接字)
网络编程 网络编程的目的就是指直接或间接地通过网络协议与其他计算机进行通讯.网络编程中 有两个主要的问题,一个是如何准确的定位网络上一台或多台主机,另一个就是找到主机后 如何可靠高效的进行数据传输.在 ...
- 0x01 现阶段目标
现阶段目标: 1.完成前端知识基础的学习. 具体如下: 在目前学习的基础上(html,css,JavaScript+BOM基础已经大致了解).针对DOM进行学习,个人在http://how2j.cn? ...
- 微信JSSDK与录音相关的坑
微信JSSDK与录音相关的坑 最近一直在做微信JSSDK与录音相关的功能开发, 遇到了各种奇尺大坑, 时不时冷不丁地被坑一道, 让我时常想嘶吼: "微信JSSDK就是个大腊鸡!!!!!!!! ...
- 面向对象程序设计_课堂作业_01_Circle
The 1st classwork of the C++ program 题目: Create a program that asks for the radius of a circle and p ...
- SDWC补题计划
2018的寒假去了SD的冬令营,因为一班二班难度悬殊,对我很不友好,几乎什么也没学会,但是我把两个班的课件都存了下来,现在慢慢把两个班的例题以及课后题都补一补(毕竟冬令营的钱不能白花). 这些题目横跨 ...
- 集合之HashSet
在前篇博文中(java提高篇(二三)-----HashMap)详细讲解了HashMap的实现过程,对于HashSet而言,它是基于HashMap来实现的,底层采用HashMap来保存元素.所以如果对H ...
- cpu负载过高分析
如何定位是哪个服务进程导致CPU过载,哪个线程导致CPU过载,哪段代码导致CPU过载? 步骤一.找到最耗CPU的进程 工具:top 方法: 执行top -c ,显示进程运行信息列表 键入P (大写p) ...
- Oracle(二)SELECT语句执行顺序
转载自:小强斋太-Study Notes,原文链接 从join on和where执行顺序认识T-SQL查询处理执行顺序 目录 一.样例 二.SELECT语句的处理过程 1. FROM阶段 2. WHE ...