JS(JavaScript)插入节点的方法appendChild与insertBefore
来源:互联网 发布:什么是客户端软件 编辑:程序博客网 时间:2024/05/22 07:55
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">1</p>
<p class="con2">2</p>
<p class="con2">3</p>
</div>
<div id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2">2</p>
<p class="con2">3</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); // 这两种方法均可实现
}
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的元素前面
}
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节点元素的后面。
}
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()方法插入节点,是可以在子节点列表的任意位置。
0 0
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS插入节点的方法appendChild、insertBefore
- js节点内部插入元素的方法appendChild() insertBefore()
- 初学js插入节点appendChild insertBefore使用方法
- JS中appendChild()与insertBefore()方法的使用
- appendChild() , insertBefore()插入节点需注意的问题
- appendChild() , insertBefore()插入节点需注意的问题
- appendChild() , insertBefore()插入节点需注意的问题
- appendChild() , insertBefore()插入节点需注意的问题
- appendChild()和insertBefore()方法插入元素的区别
- JavaScript 插入节点insertBefore()
- javascript 插入节点appendChild()
- js中AppendChild与insertBefore的用法详细解析
- js insertBefore insertAfter appendChild
- JS:appendChild()和insertBefore()
- JS appendChild和insertBefore
- CCS编译器load program为灰色
- 常用的Android弹出对话框
- 有爱
- Leetcode Valid Palindrome
- qt-4.7.1在fedora9上的编译
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- Java笔记(7)
- 一些好的技术博客
- fzu 2039 Pets(网络流最大流)
- android单元测试图解
- Control的Invoke和BeginInvoke
- 区分C语言中getch、getche、fgetc、getc、getchar、fgets、gets函数
- 表删除重复记录--小记
- 谈谈一般处理程序(1)---httpcontext