JavaScript实现HTML标签动态替换的两种方法
本文介绍如何使用JavaScript实现HTML标签内容的动态替换。通过两个示例，分别演示了利用onmouseover事件在鼠标悬停时将文本标签替换为图片，以及利用onclick事件在点击时将文本标签替换为菜单div。代码涵盖了基础的事件绑定与DOM元素属性修改，适用于简单的页面交互效果实现。
JavaScript实现HTML标签动态替换的两种方法
存在一个静态的HTML页面。
页面中包含多个具有相同ID属性ab的span标签，内容均为abcde，即<span id=ab>abcde</span><span id=ab>abcde</span><span id=ab>abcde</span><span id=ab>abcde</span>。问题是，是否可以通过JavaScript实现，在IE浏览器中将这些代码替换为其他内容？
期望的替换结果是显示四个相同的图片，即<img src="img/1.gif"/><img src="img/1.gif"/><img src="img/1.gif"/><img src="img/1.gif"/>。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <span onmouseover="change()" id='pic'>移到我这儿来</span> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
方法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <span onclick="change()" id='猪'>点击我这儿来</span> <div onblur="hideMenu();" style="border:#555 2px outset;padding:10px;display:none;" id="menu1" tabIndex=0>I am a Menu</div> </body> </html>[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么？前端开发中的作用与应用场景解析
2026-11-04 23:17:54