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

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

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

<head>
<!-- Created by TopStyle Pro Trial Version - www.bradsoft.com -->
<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>


<!--以下是JavaScript脚本-->
<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;

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭