关闭

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

标签: javascript脚本functionnullbuttoncss
676人阅读 评论(0) 收藏 举报

在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;

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:57012次
    • 积分:966
    • 等级:
    • 排名:千里之外
    • 原创:42篇
    • 转载:1篇
    • 译文:0篇
    • 评论:3条
    最新评论