<!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. Windows下Nginx的配置及配置文件部分介绍

    一.在官网下载 nginx的Windows版本,官网下载:http://nginx.org/download/ 选择你自己想要的版本下载,解压 nginx(例如nginx-1.6.3) 包到你的win ...

  2. .35-浅析webpack源码之babel-loader入口文件路径读取

    在处理./input.js入口文件时,在类型判断被分为普通文件,所以走的文件事件流,最后拼接得到文件的绝对路径. 但是对应"babel-loader"这个字符串,在如下正则中被判定 ...

  3. ThinkPHP的基本操作

    一.生成入口文件 1.打开服务器,在本地环境测试时在地址栏输入localhost/项目文件名/index.php  可以在Application下面生成一个home模块,记得在这之前,要建立一个项目文 ...

  4. linux下卸载已安装的软件

    1.先查询该软件是否安装,是否存在 rpm -qa | grep -i teamview 2.根据一中的结果(软件包名称),执行如下命令 rpm -e [软件包名]

  5. C#仪器数据文件解析-PDF文件

    不少仪器工作站输出的数据报告文件为PDF格式,PDF格式用于排版打印,但不易于数据解析,因此解析PDF数据需要首先读取到PDF文件中的文本内容,然后根据内容规则解析有意义的数据信息. C#解析PDF文 ...

  6. 批处理文件：windows下关闭指定端口

    @echo offsetlocal enabledelayedexpansionset /p port=please input port number:for /f "tokens=1-5 ...

  7. ICQ

    我一直都想编一个自己的聊天软件,像QQ那种:最近有时间我就自己编了一个.编写的过程中收获很大…… 现在拿出来跟大家分享,有兴趣的朋友可以和我交流交流. 先给大家看一下效果: 启动服务器: 再给大家看一 ...

  8. 老男孩Python全栈开发（92天全）视频教程 自学笔记20

    day20课程内容: 模块: #模块一共三种:1.Python标准库 2.第三方模块 3.应用程序自定义的模块#import sysimport jisuanapp#print(jisuanapp.a ...

  9. Qt msvc 乱码如何解决？

    #ifdef Q_OS_WIN #pragma execution_character_set("UTF-8") #endif

  10. 由select引发的思考

    一.前言 网络编程里一个经典的问题,selec,poll和epoll的区别?这个问题刚学习编程时就接触了,当时看了材料很不明白,许多概念和思想没有体会,现在在这个阶段,再重新回头看这个问题,有一种豁然 ...