开发者社区> zting科技> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

JavaScript之appendChild、insertBefore和insertAfter

简介:
+关注继续查看

这几天需要用到对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/] 
作者赞赏
 


刚做的招标网:八爪鱼招标网 请大家多意见

本文转自Sam Lin博客博客园博客,原文链接:http://www.cnblogs.com/samlin/archive/2009/03/28/JavaScript-appendChild-insertBefore-insertAfter.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【JavaScript-动画原理】如何使用js进行动画效果的实现
【JavaScript-动画原理】如何使用js进行动画效果的实现
0 0
html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟
使用前端三件套实现一个实时跟新的时钟,其中包括电子时钟和刻度时钟
0 0
JavaScript、jQuery实现“社区便利店收银系统”
随着个性化服务发展,学校、街边、社区等都流行将水果等商品洗净、切好,并装盒,按份出售。现开发一个“社区便利店收银系统”,店中每天提供固定种类的水果,装盒后,标记每一份价格,按份进行销售。在系统中,打开收银网页(casher.html),点击“+”添加销售水果,点击“结账”进行购买水果结算,点击“完成交易”进行下一个新用户购买。
0 0
JavaScript中实现replaceAll方法
我们在Java中可以使用replaceAll()方法对字符串进行批量替换,但在JS中replaceAll()方法是undefined,JS中只存在replace()方法,因此我们可以自己封装JS中replaceAll()方法供我们便捷使用。
0 0
JavaScript中实现摸球概率统计事件
在三个不透明的盒子中分别每个盒子装了两个球,第一个盒子装2个红球,第二个盒子装1个红球和1个蓝球,第三个盒子装2个蓝球,问:随机从三个盒子中取出一个球,问这个球是红球的概率?
0 0
【Web前端】【JavaScript】实现表格隔行变色
【Web前端】【JavaScript】实现表格隔行变色
0 0
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
通过HTML+CSS+Javascript实现向下滚动滚动条出现导航栏并出现回到顶部按钮点击按钮回到顶部(一)...
0 0
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)...
0 0
HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载