DOM节点的替换或修改函数replaceChild()用法实例
更新时间：2015年01月12日 10:04:27 投稿：shichen2014
这篇文章主要介绍了DOM节点的替换或修改函数replaceChild()用法,实例分析了replaceChild()替换DOM节点的使用技巧,需要的朋友可以参考下
本文实例讲述了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>
<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程序设计有所帮助。
相关文章
这篇文章主要为大家介绍了js混淆加密之jsjiami.v6分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
在本篇文章里小编给大家整理了一篇关于js数组forEach实例用法详解内容，有需要的朋友们可以跟着学习参考下。2021-10-10
这篇文章主要介绍了JS中如何克隆对象(深克隆浅克隆递归克隆)的全面探索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2024-01-01
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了JS获取iframe中longdesc属性的方法,实例分析了longdesc属性的功能及相关的获取技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了基于JavaScript实现淘宝商品广告效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变，在方法中，this 表示该方法所属的对象，如果单独使用，this 表示全局对象2021-10-10
javascript检测浏览器flash版本的实现代码，需要的朋友可以参考下。2011-12-12
这篇文章主要介绍了本人自用的global.js库源码分享,源码中包含常用WEB操作,如命名空间、DOM操作、数据判断、Cookie操作等功能,需要的朋友可以参考下2015-02-02
javaScript如何跳出多重循环break、continue
这篇文章主要为大家详细介绍了javaScript如何跳出多重循环break、continue，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论