PHP学习_PHP技术_PHP网站建设_PHP程序员专注于PHP技术研究及学习

Adophper » 前端设计 » JavaScript之appendChild、insertBefore和insertAfter

JavaScript之appendChild、insertBefore和insertAfter

此文被围观1066日期: 2011-05-28 分类 : 前端设计  标签:  ···

这几天需要用到对HTML节点元素的删/插操作,由于用到insertBefore方法的时候遇到了一些麻烦,现在作为知识的整理,分别对appendChild、insertBefore和insertAfter做个总结

appendChild定义

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+

添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中

appendChild用法

target.appendChild(newChild)

newChild作为target的子节点插入最后的一子节点之后

appendChild例子

var newElement = document.Document.createElement('label'); newElement.Element.setAttribute('value', 'Username:'); var usernameText = document.Document.getElementById('username'); usernameText.appendChild(newElement);

insertBefore定义

The insertBefore() method inserts a new child node before an existing child node.

insertBefore() 方法的作用是:在现有的子节点前插入一个新的子节点

insertBefore用法

target.insertBefore(newChild,existingChild)

newChild作为target的子节点插入到existingChild节点之前

existingChild为可选项参数,当为null时其效果与appendChild一样

insertBefore例子

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这个方法

那么就自己定义一个罗:)

insertAfter定义

function insertAfter(newEl, targetEl) { var parentEl = targetEl.parentNode;

if(parentEl.lastChild == targetEl) { parentEl.appendChild(newEl); }else { parentEl.insertBefore(newEl,targetEl.nextSibling); } }

insertAfter用法与例子

var txtName = document.getElementById("txtName"); var htmlSpan = document.createElement("span"); htmlSpan.innerHTML = "This is a test"; insertAfter(htmlSpan,txtName);

将htmlSpan 作为txtName 的兄弟节点插入到txtName 节点之后

总结:

1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数

2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。

3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点

文章来源[http://samlin.cnblogs.com/

本站使用ThinkPHP框架开发读图网主题,目前托管在阿里云,图片由读图网提供. 蜀ICP备12031064号

Copyright © 2011-2018adophper.com All Rights Reserved.