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

原创 2012年03月23日 12:33:19

在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 原生方法对dom节点的操作,创建、添加、删除、替换、插入、复制、移动等操作

创建节点添加

javascript节点的操作 创建、添加、移除、移动、复制

【转载】http://www.cnblogs.com/asqq/archive/2012/09/27/3194948.html 致谢楼主 lines (1)创建新节点createDocumentF...

转载 javascript节点的操作 创建、添加、移除、移动、复制

(1)创建新节点createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点...

javascript操作DOM--添加、删除节点的简单实例

新手遇到的问题可以用实例来帮助解读,小编觉得javascript实践最重要,一篇js操作DOM--添加、删除节点的简单实例。我们一起来 js removeChild() 用法   ...

javascript动态创建元素原理之节点操作

来源:javascript动态创建元素原理之节点操作 对于一个好的页面,为了让用户体验做到极致,动态创建页面元素是必不可少的。下面就来讲讲动态创建元素的核心技术: DOM模型和事件处理---节...

JavaScript DOM学习笔记5——创建和操作节点

之前学习了DOM中各种节点的访问方法,DOM所包含的内容远不止如此,DOM编程还包括当DOM树已经构建起来之后再添加节点。         1.创建新节点         document对象中包...

div节点的操作(添加,删除,替换,克隆)

div{ border: 1px solid #ff0000; height:100px; width:200px; margin:10px 10px; pad...

操作Cassandra(2)-添加,替换,移动和删除节点

引导(Bootstrap) 添加新节点称为“引导”。 num_tokens参数将定义加载节点在引导期间将被分配的虚拟节点(令牌)的数量。 令牌定义节点将负责的环(令牌范围)的部分。 令牌分配(Tok...

DOM操作 如何添加、移除、移动、复制、创建和查找节点等

DOM操作--- 如何添加、移除、移动、复制、创建和查找节点等 (1)创建新节点       createDocumentFragment()    //创建一个DOM片段 &#...

链表操作-创建、输出、删除,添加节点

/*=============================================================               目...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)