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.firstElementChild : oDiv.firstChild
var returnNode = oDiv.replaceChild(oSpan, firsChild); //替换第一个元素,返回被替换掉的元素
alert(returnNode.innerHTML); //1
var lastChild = oDiv.lastElementChild ? oDiv.lastElementChild : oDiv.lastChild;
oSpan = document.createElement("span");
oSpan.innerHTML = "5";
returnNode = oDiv.replaceChild(oSpan, lastChild); //替换最后一个,返回被替换掉的元素
alert(returnNode.innerHTML);//3
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
相关推荐
-
DOM节点的替换或修改函数replaceChild()用法实例
本文实例讲述了DOM节点的替换或修改函数replaceChild()用法.分享给大家供大家参考.具体分析如下: DOM节点的替换过程: (1)创建新的节点: (2)找到旧的节点: (3)站在父节点的角度,使用replaceChild(新,旧)函数来替换. 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){ //思路:1.首先找到要替换的节点:2. 创建一个新的
-
基于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</
-
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.
-
javascript基础之查找元素的详细介绍(访问节点)
当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下. DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName().使用这几种方法方法我们可以查找html文档中的任意html元素.getElementById()首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的i
-
JavaScript使用循环和分割来替换和删除元素实例
使用循环和分割来替换和删除元素,经测试很简单,但很实用,特别适合新手朋友 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>使用循环和分割来替换和删除元素</title> <script> var arr = new Array(&
-
JavaScript中的noscript元素属性位置及作用介绍
一.<script>元素属性 向XHTML页面中插入JavaScript的主要方法,就是使用<script>元素,该元素有5个属性分别为charset.defer.language.src.type,经常使用的是type.src.defer这三个. 1.type属性的值一般都是text/javascript,该属性是必须的,<script type="text/javascript"/>. 2.src属性的值是*.js外部文件,该属性是可选的,<
-
JS实现添加,替换,删除节点元素的方法
本文实例讲述了JS实现添加,替换,删除节点元素的方法.分享给大家供大家参考,具体如下: 一直以来,对于节点操作比较纠结,特别是插入到某某节点之后.居然没有这个方法,以前的我写的方法有问题,是把新节点插入到旧节点的里面去了,还是该用insertBefore方法可以实现 下面是方法: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose
-
体验js中splice()的强大(插入、删除或替换数组的元素)
处理数组的方法很多,javascript splice()算是最强大的了,它可以用于插入.删除或替换数组的元素.下面来一一介绍! 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(其实位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 看下
-
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox.webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持.有了这2个方法和属性基本上可以满足大多数要求了. 复制代码 代码如下: var getStyle = function( elem, type ){ return 'getComputed
-
javascript过滤数组重复元素的实现方法
javascript过滤数组重复元素的实现方法 以下是在网上找的资料,直接在项目中可以使用,大家可以参考下: 实现代码: function filterArray(receiveArray){ var arrResult = new Array(); //定义一个返回结果数组. for (var i=0; i<receiveArray.length; ++i) { if(check(arrResult,receiveArray[i]) == -1) { //在这里做i元素与所有判断相同与否 ar
-
JavaScript删除指定子元素代码实例
原生javascript删除指定子元素代码实例: 本章节介绍一下如何利用原生javascript实现删除指定子元素. 大家都知道使用jquery实现此功能更为方便,不过使用原生的javascript也不麻烦,下面做一下介绍. 关于jquery如何实现此功能可以参阅jquery删除指定子元素代码实例一章节. 代码实例: 复制代码 代码如下: <!DOCTYPE HTML> <html> <meta charset="utf-8"> <title&
随机推荐
- perl中使用signal(信号)实例
- 适用于抽奖程序、随机广告的PHP概率算法实例
- CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
- JavaScript中property和attribute的区别详细介绍
- Java8 HashMap的实现原理分析
- Python标准库os.path包、glob包使用实例
- 详解Python的Lambda函数与排序
- Linux学习之CentOS(二十二)--进入单用户模式下修改Root用户的密码
- JQuery中serialize() 序列化
- css expression 隔行换色
- Javascript延迟执行实现方法(setTimeout)
- php下使用iconv需要注意的问题
- jquery实现的提示浮层跟随鼠标移动
- JavaScript中使用指数方法Math.exp()的简介
- 非常不错的一招防止exe文件被感染的办法
- C#中using的三种用法
- 解析php php_openssl.dll的作用
- PHP DB 数据库连接类定义与用法示例
- apicloud拉起小程序并传递参数的方法示例
- 详解易语言导入语言包方法