替换元素节点replaceChild()

最新推荐文章于 2024-03-28 23:48:40 发布
最新推荐文章于 2024-03-28 23:48:40 发布
阅读量5.7k 收藏 3
点赞数
分类专栏： Javascript从入门到放弃

replaceChild 实现子节点(对象)的替换。返回被替换对象的引用。 

语法：

node.replaceChild (newnode,oldnew )

参数：

newnode : 必需，用于替换 oldnew 的对象。 
oldnew : 必需，被 newnode 替换的对象。

我们来看看下面的代码:

 

效果: 将文档中的 Java 改为 JavaScript。

注意: 

1. 当 oldnode 被替换时，所有与之相关的属性内容都将被移除。 

2. newnode 必须先被建立。 


<!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.getElementsByTagName("b")[0];
        var newnode=document.createElement("i");
        newnode.innerHTML="JavaScript";
        oldnode.parentNode.appendChild(newnode);
        oldnode.parentNode.replaceChild(newnode,oldnode);
  
       }    
  </script>
  
 </body>
</html>

任务

试一试，补充函数 replaceMessage() 代码，实现将 b 标签替换成 i 标签。

恍惚小盆友
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js mysql替换_JS replaceChild()方法：替换节点
weixin_34024811的博客
01-19 507
JavaScript replaceChild() 方法可以将某个子节点替换为另一个。用法如下：nodeObject.replaceChild(new_node, old_node)其中参数new_node 为指定新的节点，old_node 为被替换的节点。如果替换成功，则返回被替换的节点；如果替换失败，则返回 null。示例1以上示例为基础重写脚本，新建一个二级标题元素并替换掉红色盒子中的一级...
动态操作dom
01-18
动态操作dom方法文/1、document.createElement() 动态创建一个元素标签 //2、appendChild:把创建的标签添加到容器的末尾 // 容器.appendChild(newEle) //3、insertBefore:把创建的标签增加到容器中某一个标签的前面 // 容器.insertBefore(newEle,oldEle) 容器:oldEle.parentNode //4、replaceChild:用新的标签替换老的标签 // 容器.replaceChild(newEle,oldEle) //5、removeChild:删除某一个标签 // 容器.removeChild(我们要删除的元素) //6、cloneNode:复制一个节点 true->把当前元素和它的子元素都克隆一份 false->只把当前的元素克隆,子元素不管 // curEle.cloneNode(true);档
javascript替换已有元素replaceChild()使用介绍
10-26
主要介绍了javascript替换已有元素replaceChild()使用,需要的朋友可以参考下
JavaScript节点及列表操作实例小结
12-11
本文实例总结了JavaScript节点及列表操作的方法。分享给大家供大家参考。具体如下： （1）创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 （2）添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() （3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 g
JavaScript HTML DOM replaceChild替换子节点(1)，前端面试总结
最新发布
m0_60750088的博客
03-28 659
replaceChild方法用新节点（新创建的节点或者已经存在的节点）替换某个子节点。
DOM节点的替换或修改函数replaceChild()用法实例
09-03
主要介绍了DOM节点的替换或修改函数replaceChild()用法,实例分析了replaceChild()替换DOM节点的使用技巧,需要的朋友可以参考下
JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作实例分析
11-20
本文实例讲述了JavaScript HTML DOM 元素 (节点)新增，编辑，删除操作。分享给大家供大家参考，具体如下： createElement，createTextNode，appendChild，insertBefore，removeChild，replaceChild createElement 以下代码是用于创建 <p> 元素: var para = document.createElement("p"); createTextNode 为 <p> 元素添加文本节点： var node = document.createTextNode("这是一个新的段落。"); appen
Javascript入门学习第九篇 Javascript DOM 总结第1/2页
12-08
1，    创建节点。 createElement(): var a  = document.createElement(“p”); 它创建的是一个元素节点，所以 nodeType 等于 1 。 a.nodeName 将返回 p ; 注意；createElement()方法创建出来的新元素节点不会被自动添加到文档里，既然没添加到文档里，说明它还是一个游离的状态。所以它也没有nodeParent属性。 如果想把它添加到文档里，可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中，自己写了一个insertAfter()
replaceChild() 方法替换子节点为其他节点。---XmlDOM
love_czz的博客
03-13 798
定义和用法 replaceChild() 方法替换子节点为其他节点。 如果成功该函数则返回被替换的节点，如果失败则返回 NULL。 语法 elementNode.replaceChild(new_node,old_node) 实例 下面的代码片段使用 loadXMLDoc() 把 “books.xml” 载入 xmlDoc 中，并替换第一个 元素： xmlDoc=loadXMLDoc("books.xml"); x=xmlDoc.documentElement; // 创建 book 元素, t
JavaScript HTML DOM replaceChild替换子节点
编程界明世隐的博客
12-16 1983
目录 语法： 1.用已有的节点去替换 2.用新创建的节点去替换 replaceChild方法用新节点（新创建的节点或者已经存在的节点）替换某个子节点。 语法： replaceChild(newnode,oldnode); ​​​​​​​ newnode 新节点oldnode 要替换的节点 1.用已有的节点去替换 <!DOCTYPE html> <html> <head> <meta http-...
♥️Javascript之DOM♥️
欢迎
09-10 2017
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
javascript 拷贝节点cloneNode()使用介绍
01-19
cloneNode(a)方法接受一个布尔值参数,表示是否深拷贝 true:表示执行深拷贝,复制本节点以及整个子节点树. false:浅拷贝.只复制节点本身. 复制后返回的节点副本属于文档所有,但是并没有父节点.除非使用appendChild,insertChild(),replaceChild()将它添加到文档 代码如下: <div id=”guoDiv”> <span>1</span> <span>2</span> <span>3</span> </div> var oDiv = document.getElementById(“guoDiv”); var deepList = oDiv.
Javascript的各种节点操作实例演示代码
10-28
实例演示对javascript的节点的各种操作。包括hasChildNodes()，removeChild()，appendChild()，replaceChild()，insertBefore()，cloneNode()等
基于replaceChild制作简单的吞噬特效
09-03
本篇文章通过js和css结合实现简单的吞噬效果，代码简单易懂，需要的朋友可以参考下本
JQ 替换节点
08-13
NULL 博文链接：https://onestopweb.iteye.com/blog/2290868
HTML DOM：replaceChild()和cloneNode()
胡图图的博客
11-04 277
replaceChild()基本用法 replaceChild()方法用新节点替换某个子节点。 这个新节点可以是文档中某个已经存在的节点，也可以是创建的新的节点。 node.replaceChild(newNode, oldNode); 参数 类型 描述 newNode Node object 必需。您希望插入的节点对象。 oldNode Node object 必需。您希望删除的节点对象。 所有主流浏览器都支持该方法。 实例1： <!DOCTYPE html> &lt
replaceChild 方法
07-25
replaceChild() 方法是用于替换指定父节点下的一个子节点。它接受两个参数：新节点和要替换的旧节点。 以下是 replaceChild() 方法的使用示例： ```javascript var parentElement = document.getElementById("parent"); var newElement = document.createElement("div"); newElement.textContent = "新的内容"; var oldElement = document.getElementById("old"); parentElement.replaceChild(newElement, oldElement); ``` 在上面的代码中，我们首先通过 getElementById() 方法获取父节点元素和要替换的旧节点元素。然后，使用 createElement() 方法创建一个新的节点，并为其设置内容。最后，使用 replaceChild() 方法将新节点替换旧节点。 需要注意的是，replaceChild() 方法只能用于替换父节点下的直接子节点，不能用于替换子节点的子节点。如果想要替换更深层次的节点，可以使用其他方法先获取到目标节点，然后再进行替换操作。 希望这个回答对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值