<!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. [HAOI2009]毛毛虫

    题目描述 对于一棵树,我们可以将某条链和与该链相连的边抽出来,看上去就象成一个毛毛虫,点数越多,毛毛虫就越大.例如下图左边的树(图 1 )抽出一部分就变成了右边的一个毛毛虫了(图 2 ). 输入输出格 ...

  2. linear-grident的属性和使用以及对颜色后面参数(百分比)的理解

    linear-grident的属性和使用   css3新增Gradient属性,用来增加渐变的效果,渐变分为线性渐变 linear-grident 和 径向渐变 radial-grident,这篇文章 ...

  3. 购物车【JavaWeb小项目、简单版】

    前言 为了巩固MVC的开发模式,下面就写一个购物车的小案例.. ①构建开发环境 导入需要用到的开发包 建立程序开发包 ②设计实体 书籍实体 public class Book { private St ...

  4. jq实现数字增加或者减少的动画

    效果图: 1.HTML: <div class="up"></div> <br> <div class="down"& ...

  5. Java经典编程题50道之二十三

    给一个不多于5位的正整数,要求:①求它是几位数:②逆序打印出各位数字. public class Example23 {    public static void main(String[] arg ...

  6. bzoj 2120 带修改莫队

    2120: 数颜色 Time Limit: 6 Sec  Memory Limit: 259 MBSubmit: 7340  Solved: 2982[Submit][Status][Discuss] ...

  7. DxPackNet 3.音频捕捉（录音）

    用DxpackNet捕捉音频其实很简单 1.初始化控件 IDxMicrophCapture microphone; private void Form1_Load(object sender, Eve ...

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

    day8课程内容: 文件操作 f=open('小重山','r',encoding='utf8')   #以读的方式打开文件 data=f.read() print(data) f.close()  # ...

  9. Django静态文件路径设置

    提示 : Error fetching command 'collectstatic': You're using the staticfiles app without having set the ...

  10. 1.4 random模块

    Python中的random模块用于生成随机数,下面介绍一下random模块中最常用的几个函数. 国际惯例,用模块之前先导入: >>> import random (一)random ...