您的位置：首页 > Web前端 > JavaScript

JavaScript中对节点的创建,添加及替换操作

2012-03-23 12:33 381 查看

在javaScript的运用中,我们经常需要对某个节点进行增加(appendChid/insertBefore),删除(removeChild),替换(replaceChid)等操作最关键的地方,我觉得应该是找准他们的父节点,以及要操作的子节点.这样就会思路清晰的进行各种花样的操作.前面已经介绍了删除操作,接下来主要是关于增加和替换操作的代码.

以下代码是添加一个节点的代码:

<head>



<title></title>

<style type="text/css">

h2{ //对h2元素设置css样式

color: red;

}

#hh{ //对新添加的元素的进行css样式设置(对比是否添加成功)

color: blue;

}

</style>

</head>

<body>

<h1 id="p2">说出你的爱吧!</h1>

<p id="p1">我爱你,成都!</p>

<input type="text" id="text1" />

<input type="button" id="btnclick" value="click me"/>

<h2 id="p3">我是h2元素的内容</h2>



<script type="text/javascript">

function addele(){

var gettext=document.getElementById("text1").value;

if(gettext!=null){

var newh=document.createElement("h2");//创建一个新元素节点

newh.id="hh";
//给新元素添加一个id属性

var newtext=document.createTextNode(gettext)// 创建一个新的文本节点

newh.appendChild(newtext);

document.body.appendChild(newh); //在body的最后一个元素后增加一个元素

}

document.getElementById("text1").value="";//点击按钮之后,把文本框的内容清空

}

</script>

</body>

</html>

以下脚本是在指定元素后增加一个新元素:如:

function insertbeforeele(){

var gettext=document.getElementById("text1").value;

if(gettext!=null){

var oldh2=document.getElementById("p3");

var newh=document.createElement("h3");

var newtext=document.createTextNode(gettext)

newh.appendChild(newtext);

document.body.insertBefore(newh, oldh2);

}

document.getElementById("text1").value="";

}

document.getElementById("btnclick").onclick=insertbeforeele;

以下脚本是创建一个新元素来替换掉指定的元素.如:

function repaleele(){

var gettext=document.getElementById("text1").value;

if(gettext!=null){

var oldh2=document.getElementById("p3");

var newh=document.createElement("h3");

var newtext=document.createTextNode(gettext)

newh.appendChild(newtext);

document.body.replaceChild(newh,oldh2)

}

}

document.getElementById("btnclick").onclick=repaleele;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航