<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

</head>

<body>

<div><b id="oldnode">JavaScript</b>是一个很常用的技术，为网页添加动态效果。</div>

<a href="javascript:replaceMessage()"> 将加粗改为斜体</a>

<script type="text/javascript">

function replaceMessage(){

var oldNode=document.getElementById("oldnode"); //提取老元素；

var newNode=document.createElement("i");//创建一个新的节点；

newNode.innerHTML=oldNode.innerHTML;//把旧的oldnode内容赋值给新的newnode，要不然newnode是无内容，只是简单的改了个属性，把b变成了i，显示出来的是空；

oldNode.parentNode.replaceChild(newNode,oldNode);//实现子节点(对象)的替换，返回被替换对象的引用；

}

</script>

</body>

</html>

javaScript替换元素节点的更多相关文章

  1. 替换元素节点replaceChild()

    替换元素节点replaceChild() replaceChild 实现子节点(对象)的替换.返回被替换对象的引用. 语法: node.replaceChild (newnode,oldnew ) 参 ...

  2. replaceWith() 和 replaceAll() 方法替换元素节点

    $("#Span1").replaceWith("<span title='replaceWith'>陶国荣</span>"); $(& ...

  3. javascript删除元素节点

    1.删除元素父节点 function removeElement(_element){ var _parentElement = _element.parentNode; if(_parentElem ...

  4. [TimLinux] JavaScript 获取元素节点的5种方法

    1. getElementById document.getElementById("id_value") # 返回值为Node对象,没有元素时,返回 == undefined值( ...

  5. Javascript进阶篇——(DOM—节点---插入、删除和替换元素、创建元素、创建文本节点)—笔记整理

    插入节点appendChild()在指定节点的最后一个子节点列表之后添加一个新的子节点.语法: appendChild(newnode) //参数: //newnode:指定追加的节点. 为ul添加一 ...

  6. JavaScript之怎样获取元素节点

    JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为 ...

  7. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

  8. 获取元素节点的子节点 & 获取文本节点

    1. 获取元素节点的子节点(**只有元素节点才有子节点):              ①. childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点          ...

  9. 使用JavaScript操作DOM节点元素的常用方法(创建/删除/替换/复制等)

    getElementById(id)这是通过id来访问某一元素,最常用的之一,例:<html><body><div id="myid">test ...

随机推荐

  1. ES6标准入门 第一章：简介

    ECMAScript 6 是JavaScript 语言的下一代标准:发布于2015年,又称为ECMAScript 2015. ECMAScript 与 JavaScript 的关系:前者是后者的规范, ...

  2. 网络配置：linux学习第一篇

    1.      先使用dhclient获取ip 再使用命令ip addr查看获取到的ip 2.      设置静态IP 编辑网卡配置文件,路径: 3.      重启网络服务 命令:systemctl ...

  3. MySQL统计函数记录——按月、按季度、按日、时间段统计

    按年汇总,统计:select sum(mymoney) as totalmoney, count(*) as sheets from mytable group by date_format(col, ...

  4. vs code 使用git

    1.下载git https://git-scm.com/ 2. git 全局设置 git config --global user.name "xxxx" git config - ...

  5. C/C++语言简介之程序结构

    C语言的模块化程序结构用函数来实现,即将复杂的C程序分为若干模块,每个模块都编写成一个C函数,然后通过主函数调用函数及函数调用函数来实现一大型问题的C程序编写,因此常说:C程序=主函数+子函数.因此, ...

  6. 【netty这点事儿】ByteBuf 的使用模式

    堆缓冲区 最常用的 ByteBuf 模式是将数据存储在 JVM 的堆空间中. 这种模式被称为支撑数组(backing array), 它能在没有使用池化的情况下提供快速的分配和释放. 直接缓冲区 直接 ...

  7. 测试同学难道要写一辈子的hello world？

    最近我们在测试团队内推行自动化用例责任制,大致的意思是:我们安排培训资源,提供技术支持和一对一辅导,要求每一个自主选择了自动化和接口测试发展通道的同学必须让自己负责的项目自动化用例覆盖率有所提升. 后 ...

  8. DxPackNet 5.视频高质量的压缩和传输

    DxPackNet 对视频的压缩和解压也提供了很好的支持,且系统不需要装第三方解码器哦~ 主要用到了 IxVideoEncoder 视频编码器  和 IxVideoDecoder 两个接口 这里只做简 ...

  9. pep 8 规范的一些记录

    一.pep8起源 龟叔创立Python的初衷里就有创立一个容易阅读的编程语言,所以亲自操刀写了pep8 代码规范,每个项目开始前都要有一个共识,就是自己的代码规范,pep8 就是一个很好的范本. 二. ...

  10. ubuntu14.04 安装Jenkins

    wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add - sudo sh -c 'ec ...