源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js中AppendChild与insertBefore的用法详细解析

  • 时间:2022-11-10 12:35 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js中AppendChild与insertBefore的用法详细解析
[b]appendChild定义 [/b]appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 [b]appendChild用法 [/b]target.appendChild(newChild) newChild作为target的子节点插入最后的一子节点之后 [b]appendChild例子 [/b]var newElement = document.Document.createElement('label'); newElement.Element.setAttribute('value', 'Username:'); var usernameText = document.Document.getElementById('username'); usernameText.appendChild(newElement); [b]insertBefore定义 [/b]The insertBefore() method inserts a new child node before an existing child node. insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点 [b]insertBefore用法 [/b]target.insertBefore(newChild,existingChild) newChild作为target的子节点插入到existingChild节点之前 existingChild为可选项参数,当为null时其效果与appendChild一样 [b]insertBefore例子 [/b]var oTest = document.getElementById("test"); var newNode = document.createElement("p"); newNode.innerHTML = "This is a test"; oTest.insertBefore(newNode,oTest.childNodes[0]);    好了那么有insertBefore的应该也有insertAfter吧? 好那我们来用Aptana编写一个例子吧,但Aptana的智能提示告诉我其实没有insertAfter这个方法 那么就自己定义一个罗:) [b]insertAfter定义 [/b]function insertAfter(newEl, targetEl) {       var parentEl = targetEl.parentNode;       if(parentEl.lastChild == targetEl)       {            parentEl.appendChild(newEl);       }else       {            parentEl.insertBefore(newEl,targetEl.nextSibling);       }            }   [b]insertAfter用法与例子 [/b]var txtName = document.getElementById("txtName"); var htmlSpan = document.createElement("span"); htmlSpan.innerHTML = "This is a test"; insertAfter(htmlSpan,txtName); 将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后 [b]总结: [/b]1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数 2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。 3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部