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 相关文章推荐
Extjs Ext.MessageBox.confirm 确认对话框详解
Apr 02 Javascript
JavaScript中“基本类型”之争小结
Jan 03 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
vue如何搭建多页面多系统应用
Jun 17 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准确取得服务器IP地址的方法
2015/06/02 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
利用javascript中的call实现继承
2007/01/22 Javascript
js玩一玩WSH吧
2007/02/23 Javascript
js 未结束的字符串常量错误解决方法
2010/06/13 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
Python装饰器基础详解
2016/03/09 Python
Python实现excel转sqlite的方法
2017/07/17 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
python表格存取的方法
2018/03/07 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
详解python中*号的用法
2019/10/21 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
Django封装交互接口代码
2020/07/12 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
保安员岗位职责
2013/11/17 职场文书
证婚人经典证婚词
2014/01/09 职场文书
旅游个人求职信范文
2014/01/30 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
计算机专业自荐信
2015/03/05 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python