DOM节点的替换或修改函数replaceChild()用法实例


Posted in Javascript onJanuary 12, 2015

本文实例讲述了DOM节点的替换或修改函数replaceChild()用法。分享给大家供大家参考。具体分析如下:

DOM节点的替换过程:
(1)创建新的节点;
(2)找到旧的节点;
(3)站在父节点的角度,使用replaceChild(新,旧)函数来替换。

<html>

<head>

<script type="text/javascript">

function t(){

 //思路:1.首先找到要替换的节点;2. 创建一个新的节点;3.找到父节点,在父节点的角度调用replaceChild(新,旧)方法

 var newli = document.createElement('li');//创建新节点

 var newtext = document.createTextNode('白天');//创建文本节点

 newli.appendChild(newtext);

 

 var nodeul = document.getElementsByTagName('ul')[0];//找到父节点

 var oldli = nodeul.children[2];//找到要替换的节点

 

 nodeul.replaceChild(newli,oldli);//替换

 

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li>春天</li>

  <li>夏天</li>

  <li>蓝天</li>

  <li>秋天</li>

  <li>冬天</li>

 </ul>

</div>

<div id="copyul">

</div>

<hr />

<button onclick="t()" value="">节点的替换与修改</button>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
帮助避免错误的Javascript陷阱清单
May 31 Javascript
通过JS获取用户本地图片路径并显示的代码
Feb 16 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
浅谈JS原生Ajax,GET和POST
Jun 08 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
taro开发微信小程序的实践
May 21 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 Javascript
tracking.js实现前端人脸识别功能
Apr 16 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 #Javascript
推荐4个原生javascript常用的函数
Jan 12 #Javascript
原生js实现日期联动
Jan 12 #Javascript
Javascript中innerHTML用法实例分析
Jan 12 #Javascript
js实现从数组里随机获取元素
Jan 12 #Javascript
javascript的tab切换原理与效果实现方法
Jan 10 #Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 #Javascript
You might like
PHP 高手之路(一)
2006/10/09 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
超清晰的document对象详解
2007/02/27 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
vue slot与传参实例代码讲解
2019/04/28 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
python TCP包注入方式
2020/05/05 Python
python如何实现图片压缩
2020/09/11 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
省三好学生申请材料
2014/01/22 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
股指期货心得体会
2014/09/13 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
毕业设计致谢词
2015/05/14 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
你离财务总监还有多远?速览CFO的岗位职责
2019/11/18 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
解决xampp安装后Apache无法启动
2022/03/21 Servers