JavaScript高级程序设计学习笔记之DOM基础(三)

phoebird

浏览: 113759 次
性别:
来自: 重庆

最近访客更多访客>>

maoweiwer

balancircle

a1012827688

fcr1209973

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript JSP HTML

5、在原有元素之前添加元素显示消息，insertBefore（）

<html>

<head>

function insertMessage(){

var oNewP=document.createElement("p");//创建新元素

var oNewText=document.createTextNode("Hello Universite");//创建文本

oNewP.appendChild(oNewText);//为节点添加文本

var oOldP=document.getElementsByTagName("p")[0];

// document.body.insertBefore(oNewP,oOldP);//将新元素消息插入老元素消息之后

//也可替换为

oOldP.parentNode.insertBefore(oNewP,oOldP);

}

</script>

</head>

<p>hello world</p>

</body>

</html>

显示效果：

Hello Universite

hello world

6、创建文档碎片，为了提升性能。createDocumentFragment

<html>

<head>

function createFragment(){

//创建文本碎片为了便于提升性能，当调用文档碎片时，只刷新一次页面

//而在以前的传统做法是调用十次document.body.appendChild()

//节点文本数组

var arrText=["first","second","third","fourth","fifth","sixth","seventh","eighth","nineth","tenth"];

var oFragment=document.createDocumentFragment();//创建文档碎片

for(var i=0;i<arrText.length;i++){

var oP=document.createElement("p");//创建元素p

var oText=document.createTextNode(arrText[i]);//创建文本为将每个文本数组的循环内容

oP.appendChild(oText);//文本添加到元素中

oFragment.appendChild(oP);//将每个元素文本添加到文档碎片中

}

document.body.appendChild(oFragment);//添加文档碎片到body中

}

</script>

</head>

</body>

</html>

显示效果如下：

First

Second

Third

Fourth

Fifth

Sixth

Seventh

Eighth

Nineth

tenth

分享到：

JavaScript高级程序设计学习笔记之DOM基 ... | 川渝交界处今晨发生5级地震

2010-01-31 12:19
浏览 1639
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论