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 相关文章推荐
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
原生JS实现不断变化的标签
May 22 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
原生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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
JS中的多态实例详解
2017/10/15 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
深入理解Python中的内置常量
2017/05/20 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
解决pycharm不能自动保存在远程linux中的问题
2021/02/06 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
五十岁生日宴会答谢词
2014/01/15 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
骨干教师考核方案
2014/05/09 职场文书
销售2014年度工作总结
2014/12/08 职场文书
个人典型事迹材料
2014/12/30 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
Python采集股票数据并制作可视化柱状图
2022/04/04 Python