初学js 插入节点 appendChild insertBefore 方法
2011-07-03 19:28
429 查看
首先 从定义来理解 这两个方法:
appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)
insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)
相同之处:插入子节点
不同之处:实现原理方法不同。
appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。
insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。
来看个这个简单的实例:在id为box-con 的末尾添加一个子节点div
这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写呢
或者
这里想说的是 nextSibling :某个元素之后紧跟的元素(处于同一树层级中)。
reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。
previousSibling - 取得某节点的上一个同级节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现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>
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插入节点appendChild insertBefore使用方法
- 初学js插入节点appendChild insertBefore使用方法
- 初学js插入节点appendChild insertBefore使用方法
- JS插入节点的方法appendChild、insertBefore
- js 向body插入首个节点 解决方法
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- js:插入节点appendChild insertBefore使用方法
- 利用vue.js插入dom节点的方法
- js节点内部插入元素的方法appendChild() insertBefore()
- JS(JavaScript)插入节点的方法appendChild与insertBefore
- c++实现二叉树的查找,插入,删除,深度,叶子节点数,度为1的节点数(递归方法)及运行实例结果
- DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法,这节会学习替换方法replaceWith .replaceWith( newConten
- java在list集合指定位置插入对象和js在数组指定位置插入对象的方法
- C#调用前台js方法,实现滚动条跟随选中节点位置变化
- 节点插入方法
- JavaScript 中在光标处插入添加文本标签节点 详细方法
- 平衡二叉树 AVL 的插入节点后旋转方法分析