DOM节点的替换或修改函数replaceChild()用法实例
2023-06-13 09:15:40 时间
本文实例讲述了DOM节点的替换或修改函数replaceChild()用法。分享给大家供大家参考。具体分析如下:
DOM节点的替换过程:
(1)创建新的节点;
(2)找到旧的节点;
(3)站在父节点的角度,使用replaceChild(新,旧)函数来替换。
<head>
<scripttype="text/javascript">
functiont(){
//思路:1.首先找到要替换的节点;2.创建一个新的节点;3.找到父节点,在父节点的角度调用replaceChild(新,旧)方法
varnewli=document.createElement("li");//创建新节点
varnewtext=document.createTextNode("白天");//创建文本节点
newli.appendChild(newtext);
varnodeul=document.getElementsByTagName("ul")[0];//找到父节点
varoldli=nodeul.children[2];//找到要替换的节点
nodeul.replaceChild(newli,oldli);//替换
}
</script>
</head>
<body>
<divid="container">
<ul>
<li>春天</li>
<li>夏天</li>
<li>蓝天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<divid="copyul">
</div>
<hr/>
<buttononclick="t()"value="">节点的替换与修改</button>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关文章
- DFP 数据转发协议应用实例 4.修改网络中指定设备的参数
- 高通SDX12:跨子系统数据共享实例分享
- oracle横向纵向求和代码实例
- 嵌入式Linux应用在智慧家居的分析与实践(嵌入式linux实例)
- 探索Oracle用户与实例间的关系(oracle用户和实例)
- MySQL 子查询详解与实例演练(mysqlsub)
- 实例展示:MySQL事务的应用与操作技巧(mysql事务例子)
- 单机部署多实例Redis节点弹性部署提升性能(单机多个redis)
- Redis集群添置新节点,构建更健壮的分布式环境(redis集群新增实例)
- 深入了解Redis节点与实例之间的差异(redis节点和实例区别)
- java正则表达式应用的实例代码
- Qt实现图片移动实例(图文教程)
- 使用C#实现在屏幕上画图效果的代码实例
- jqueryeasyui中treegrid用法的简单实例
- Python获取新浪微博的最新公共微博实例分享
- JavaScript针对网页节点的增删改查用法实例
- python的re模块应用实例