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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
JS实现的在线调色板实例(附demo源码下载)
Mar 01 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP仿盗链代码
2012/06/03 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
Nodejs下DNS缓存问题浅析
2016/11/16 NodeJs
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
微信小程序本作用域下调用全局JS详解及实例
2017/02/22 Javascript
Vue制作Todo List网页
2017/04/26 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
Python迭代用法实例教程
2014/09/08 Python
用Python制作在地图上模拟瘟疫扩散的Gif图
2015/03/31 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
美国生鲜及杂货电商:FreshDirect
2018/01/29 全球购物
以下的初始化有什么区别
2013/12/16 面试题
车间副主任岗位职责
2013/12/24 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
一夜的工作教学反思
2014/02/08 职场文书
班班通校本培训方案
2014/03/12 职场文书
球队口号
2014/06/18 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
统招统分证明
2015/06/23 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers