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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • javascript替换已有元素replaceChild()使用介绍

    replaceChild(a,b)是用来替换文档中的已有元素的 参数a:要插入的节点, 参数b:要替换的节点 复制代码 代码如下: var oDiv = document.getElementById("guoDiv"); var oSpan = document.createElement("span"); oSpan.innerHTML = "4"; var firsChild = oDiv.firstElementChild ? oDiv.

  • 基于replaceChild制作简单的吞噬特效

    基于replaceChild制作简单的吞噬特效

    效果演示图: 源   码   查   看 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in">4</

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

    本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要替换的节点:2. 创建一个新的

  • Sql Server中Substring函数的用法实例解析

    Sql Server中Substring函数的用法实例解析

    SQL 中的 substring 函数是用来抓出一个栏位资料中的其中一部分.这个函数的名称在不同的资料库中不完全一样: MySQL: SUBSTR( ), SUBSTRING( ) Oracle: SUBSTR( ) SQL Server: SUBSTRING( ) SQL 中的 substring 函数是用来截取一个栏位资料中的其中一部分. 例如,我们需要将字符串'abdcsef'中的'abd'给提取出来,则可用substring 来实现: select substring('abdcsef'

  • ES6中Array.copyWithin()函数的用法实例详解

    ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去. Array.prototype.copyWithin(target, start = 0, end = this.length) 该函数有三个参数. target:目的起始位置. start:复制源的起始位置,可以省略,可以是负数. end:复制源的结束位置,可以省略,可以是负数,实际结束位置是end-1. 例: 把第3个元素(从0开始)到第5个元素,复制并覆盖到以第1个位置

  • C语言中qsort函数的用法实例详解

    C语言中qsort函数的用法实例详解 快速排序是一种用的最多的排序算法,在C语言的标准库中也有快速排序的函数,下面说一下详细用法. qsort函数包含在<stdlib.h>中 qsort函数声明如下: void qsort(void * base,size_t nmemb,size_t size ,int(*compar)(const void *,const void *)); 参数说明: base,要排序的数组 nmemb,数组中元素的数目 size,每个数组元素占用的内存空间,可使用si

  • DOM节点深度克隆函数cloneNode()用法实例

    本文实例讲述了DOM节点深度克隆函数cloneNode()用法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeul = document.getElementsByTagName('ul')[0];//获取需要复制的UL节点  var newul = nodeul.cloneNode(true)

  • DOM节点删除函数removeChild()用法实例

    本文实例讲述了DOM节点删除函数removeChild()用法.分享给大家供大家参考.具体分析如下: DOM删除一个节点,必须要站在父节点的高度去删除,代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  //思路:1.首先找到要删除的节点:2. 找到它的父节点,在父节点的角度删除子节点  var nodeul = document.getEleme

  • php中正则替换函数ereg_replace用法实例

    本文实例讲述了php中正则替换函数ereg_replace用法.分享给大家供大家参考.具体如下: 下面的实例是利用php 正则替换函数 ereg_replace来把指定的字符替换成我想需要的字符实例,代码如下: 复制代码 代码如下: $num = 'www.jb51.net'; $string = "this string has four words. <br>"; $string = ereg_replace ('four', $num, $string); echo

  • js在指定位置增加节点函数insertBefore()用法实例

    本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeli = document.createElement('li');//创建一个li节

  • php字符串替换函数substr_replace()用法实例

    本文实例讲述了php字符串替换函数substr_replace()用法.分享给大家供大家参考.具体分析如下: substr_replace用于在指定字符串中替换指定位置的子字符串 <?php $string = "Warning: System will shutdown in NN minutes!"; $pos = strpos($string, "NN"); print(substr_replace($string, "15", $p

  • Python中函数的用法实例教程

    本文以数值计算为例讲述了Python中函数的用法,分享给大家供大家参考借鉴之用.具体如下: 我们都知道圆的面积计算公式为: S = πr2 当我们知道半径r的值时,就可以根据公式计算出面积.假设我们需要计算3个不同大小的圆的面积: r1 = 12.34 r2 = 9.08 r3 = 73.1 s1 = 3.14 * r1 * r1 s2 = 3.14 * r2 * r2 s3 = 3.14 * r3 * r3 当代码出现有规律的重复的时候,你就需要当心了,每次写3.14 * x * x不仅很麻烦

随机推荐