如何使用JavaScript替换DOM元素？

如何使用JavaScript将一个DOM元素替换为另一个元素？下面本篇文章就来给大家介绍一些使用JavaScript替换DOM元素的方法，希望对大家有所帮助。

在JavaScript中可以使用以下几种方法来将一个DOM元素替换为另一个元素：

方法1：使用parentNode属性和replace()方法

parentNode属性以Node 对象的形式返回指定节点的父节点；如果指定节点没有父节点，则返回 null。

语法：

node.parentNode
返回值：返回一个Node对象，表示节点的父节点，如果没有父节点，则返回null。

replace()方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

示例：

<body style="text-align:center;" id="body"><p style="font-size: 18px; font-weight: bold;">单击按钮，替换dom中的a标签元素</p><div><a id="a" href="#">需要替换的a标签</a></div><br><button onclick="Run()">点击</button><p id="DOWN" style="color:red; font-size: 20px; font-weight: bold;"> </p><script>var el_down = document.getElementById("DOWN");function Run() {var aEl = document.getElementById("a");var newEl = document.createElement("span");newEl.innerHTML = "span标签中替换的文本!";aEl.parentNode.replaceChild(newEl, aEl);el_down.innerHTML = "a元素被替换为span元素。";}</script>
</body>

效果图：

1.gif

方法2：使用replaceChild()方法和replace()方法

replaceChild()方法用新节点替换子节点；此新节点可以是文档中的现有节点，也可以是新创建的节点。

语法：

node.replaceChild(newNode, oldNode)
参数：

●　newNode：此参数是必需的。它指定要插入的节点对象。

●　oldNode：此参数是必需的。它指定要删除的节点对象。

返回值：返回一个节点对象，表示替换的节点。

示例：

<body style="text-align:center;" id="body"><h3>单击按钮，替换dom中的a标签元素</h3><div><a id="a" href="#">需要替换的a标签</a></div><br><button onclick="Run()">点击</button><div id="DOWN" style="color:red; font-size: 20px; font-weight: bold;"> </div><script>var el_down = document.getElementById("DOWN");function Run() {var aEl = document.getElementById("a");var newEl = document.createElement("p");newEl.innerHTML = "p标签中替换的文本!";aEl.parentNode.replaceChild(newEl, aEl); el_down.innerHTML = "a元素被替换为p元素。";}</script>
</body>

2.gif

支持的浏览器：

●　Google Chrome

●　Mozila Firefox

●　Internet Explorer

●　Safari

●　Opera

如何使用JavaScript替换DOM元素？相关推荐

JavaScript HTML DOM 元素（节点）
JavaScript HTML DOM 元素(节点) 添加和删除节点(HTML 元素) <div id="div1"> <p id="p1"& ...
如何使用纯JavaScript隐藏DOM元素
How do you hide a DOM element using plain JavaScript? 如何使用纯JavaScript隐藏DOM元素? Every element exposes ...
JavaScript HTML DOM元素节点常用操作接口
在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类 ...
JavaScript获取DOM元素位置和尺寸大小
在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽略的一部分,要想写出预想效果的JavaScript ...
【面试必备】javascript操作DOM元素
前言时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...
jQuery 学习-DOM篇（六）：jQuery 替换 DOM 元素
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
JavaScript操作DOM元素
查询: ①.标准DOM操作API: document.getElementById("id"). document.getElementsByTagName("div&q ...
使用原生JavaScript改变DOM元素面试题
今天遇到一个面试题,感觉挺有意思的,就回来研究一下,发现遇到些问题,最后通过百度找出了问题所在,下面请看: 首先是代码骨架: <!DOCTYPE html> <html> &l ...
javascript创建DOM元素(标签script)并追加到title标签中
html代码 <!doctype html> <html lang="en"> <head><meta charset="UTF ...
【JavaScript】DOM 操作元素样式和元素类名
文章目录 [JavaScript]DOM 操作元素样式和元素类名一. 操作元素样式 (1)操作行内元素 1. 获取元素的样式 2. 设置元素的样式 (2) 操作非行内元素和行内元素 1. 获取元素的 ...

如何使用JavaScript替换DOM元素？

如何使用JavaScript替换DOM元素？相关推荐

最新文章

热门文章