在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").οnclick=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").οnclick=repaleele;
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
