<!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. Ubuntu下的Samba服务器配置

    一. samba的安装: sudo apt-get insall samba 二. 创建共享目录: mkdir /home/phinecos/share sodu chmod 777 /home/ge ...

  2. LeetCode - 690. Employee Importance

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  3. Centos启动默认打开网络

    Centos打开网络 测试的时候发现网络没有打开,得到图像界面点击网络打开.比较麻烦去搜索了解决方法在此记录下来. 通过 /etc/sysconfig/network-script/, 编辑ifcfg ...

  4. java递归

    package com.sun.test; import java.util.ArrayList; import java.util.List; /** * 递归 * */ public class ...

  5. 观察者模式—jdk自带源码分析

    一:观察者模式简介 二:jdk实现观察者模式的源码 三:实际例子 四:观察者模式的优点和不足 五:总结 一:观察者模式简介 有时又被称为发布(publish )-订阅(Subscribe)模式.模型- ...

  6. vue框架-学习记录

    前段时间在做vue项目时,遇到挺多问题,想简单总结一下: 1.关于父组件,子组件的通信 网上有很多这方面的讲解,讲解也比较细致,我主要总结了自己在项目中需要的: [1]父组件-子组件 也就是" ...

  7. linux开放80 端口

    1.使用su登录管理员用户 2.编辑防火墙配置文件 vim /etc/sysconfig/iptables 3.在里面加入后保存 #open port 80 -A INPUT -p TCP -m st ...

  8. 2018/3/2晚11点30分写的程序(C++)

    程序目标:输入一个字符串,竖向输出该字符串.使用string和动态分配内存机制.代码如下: #include<iostream>#include "stdafx.h"# ...

  9. handler机制面试

    handler面试必问 解析: Android提供了Handler和Looper来满足线程间的通信. Handler先进先出原则.Looper类用来管理特定线程内对象之间的消息交换(Message E ...

  10. [Note] Stream Computing

    Stream Computing 概念对比 静态数据和流数据 静态数据,例如数据仓库中存放的大量历史数据,特点是不会发生更新,可以利用数据挖掘技术和 OLAP(On-Line Analytical P ...