innerHtml的使用

最新推荐文章于 2025-09-12 14:04:02 发布

weixin_33809981

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量158

点赞数

文章标签： javascript ViewUI

本文通过一个简单的HTML页面示例，展示了如何使用JavaScript来获取并交换两个DOM元素的内容。示例中涉及了基本的HTML结构定义及JavaScript操作DOM的基本方法。

1.程序

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 <script type="text/javascript">
 7     window.onload=function(){
 8         var cityNode = document.getElementById("city");
 9         var gameNode = document.getElementById("game");
10         
11         //展示city的内容
12         alert(cityNode.innerHTML);
13         
14         //互换 #city 节点和 #game 节点中的内容. 
15         var tempHTML = cityNode.innerHTML;
16         cityNode.innerHTML = gameNode.innerHTML;
17         gameNode.innerHTML = tempHTML;
18     }
19 </script>
20 </head>
21 <body>
22 <body>
23     <p>你喜欢哪个城市?</p>
24     <ul id="city">
25         <li id="bj" name="BeiJing">北京</li>
26         <li>上海</li>
27         <li id="dj">东京</li>
28         <li id="se">首尔</li>
29     </ul><br><br>
30     
31     <p>你喜欢哪款单机游戏?</p>
32     <ul id="game">
33         <li id="rl">红警</li>
34         <li>实况</li>
35         <li>极品飞车</li>
36         <li>魔兽</li>
37     </ul><br><br>
38 </body>
39 </html>

2.运行结果

　　互换后的结果：

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33809981

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

innerHTML的使用

凌凌小博客

01-26

577

接学长的项目时，看到innerHTML的这个属性时，一下懵逼了，书上从没有看过这个属性，上3wschool看的解释一头雾水，于是查找资料，终于找到比较通俗易懂的解释了，和大家分享： innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；如：这是内容，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的

html--innerHTML用法及和与innerText区别

Schaffer的博客

06-04

1万+

一、innerHTML用法 innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；如：<div id="aa">这是内容</div> 我们可以通过 document.getElementById(‘aa’).innerHTML 来获取id为aa的对象的内嵌内容；也可以对某对象插入内容，如 document.getElementById(‘abc’).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。实例： 1.获取段落p的 in

参与评论您还未登录，请先登录后发表或查看评论

innerHTML

konglingnan999的博客

05-28

635

DOM操作中的innerHTML可以说是使用频率比较高的了，在使用的时候有一些要点需要注意： 1. innerHTML与outerHTML的区别 2. 通过innerHTML插入脚本 3. innerHTML替换元素影响内存 4. innerHTML的性能以下做详细说明： innerHTML与outerHTML的区别 innerHTML在读模式下返回所操作元素的所有子节点，写模式下

DOM之innerHTML属性

weixin_46370867的博客

11-30

238

今天学习了innerHTML属性，希望可以帮助到有需要的小伙伴 innerHTML属性用法：可以用来设置或返回表格行的开始标签和结束标签之间的HTML 缺点： innerHTML属性存在安全问题(innerHTML属性的值不能由用户写) 下面我们向列表中加一个li 实例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view

JavaScript中innerHTML的用法

Read_and_Write的博客

09-30

778

innerHTML在JS中具有双向功能：获取对象的内容或向对象插入内容；获取对象的内容例如： <script type="text/Javascript"> function getInnerHTML(){ alert(document.getElementById("test").innerHTML); } </script> </head&gt...

javascript 异步的innerHTML使用分析

10-29

JavaScript中的异步innerHTML使用主要涉及的是在处理大量数据或复杂DOM结构时，如何避免阻塞浏览器并优化性能的问题。innerHTML属性通常用于动态更新HTML元素的内容，但当涉及到大量的DOM操作时，尤其是对于商务应用...

javascript innerHTML使用分析

01-19

innerHTML属性 IE还是两个a加一个空格， Chrome则是原始输入的样子。回车当在DIV中输入”a[回车][任意个空格]a”时，HTML呈现Chrome和IE是一样的。 innerHTML属性 IE是3个字符，在两个a中间加了个空格。 Chrome则...

JavaScript中的innerHTML使用

最新发布

东城绝神

09-12

343

《Linux运维总结：Redis7.4.5哨兵集群开启ACL并配置用户》

前后端开发Mock作用说明，mock.ts

循环编织时间年轮，递归叩问存在本质，谁能在硅基荒原上，种出思想的玫瑰……

09-12

297

mock.ts是前端开发中用于模拟后端接口的TypeScript文件，通过生成虚假数据使前端无需等待后端即可独立开发。它定义数据结构、模拟请求响应，并提供与真实接口一致的调用方式。示例展示了如何生成用户数据并模拟分页接口，使用vite-plugin-mock等工具实现。前端代码调用Mock接口与调用真实接口方式相同，待后端完成时只需替换接口地址即可平滑切换，实现了前后端并行开发。

JavaScript的功能和作用

2402_83164836的博客

09-10

483

JavaScript（简称 JS）是一种，最初设计用于为网页添加动态交互功能。经过多年发展，其应用场景已远超浏览器，成为覆盖前端、后端、移动端、桌面端甚至物联网等领域的“全场景语言”。

web 网页数据传输处理过程

weixin_47106289的博客

09-08

788

web 网页数据传输处理过程

＜uniapp＞＜指针组件＞基于uniapp，编写一个自定义箭头指针组件

用沸腾的热血，支付我们的人生吧！

09-10

398

本文介绍了基于uniapp开发的自定义带箭头指针组件，通过SVG实现直线和箭头的组合效果。组件支持设置长度、颜色、角度等参数，并提供三种箭头规格(small/normal/big)可选。文章详细讲解了SVG结构的实现过程，包括计算终点坐标、响应式参数处理等核心功能，并展示了不同配置下的指针效果。该组件可用于时钟指针等场景，具有灵活性和复用性特点。

innerHtml怎么使用

06-13

### 使用 `innerHTML` 属性的详细说明在 JavaScript 中，`innerHTML` 是一个非常常用的属性，用于获取或设置指定元素的内容。以下是关于如何使用 `innerHTML` 属性的详细说明： #### 1. 获取元素内容可以通过 `document.getElementById()` 方法获取指定的 HTML 元素对象，然后使用 `.innerHTML` 属性读取该元素的内容。 ```javascript function getInnerHTML() { var element = document.getElementById("example"); alert(element.innerHTML); // 显示元素的内容 } ``` 上述代码中，通过 `document.getElementById("example")` 获取了 ID 为 `example` 的元素，并通过 `.innerHTML` 属性读取其内容[^2]。 #### 2. 设置元素内容除了读取内容外，还可以通过 `innerHTML` 属性修改元素的内容。例如： ```javascript document.getElementById('innerHTMLtxt').innerHTML = "奇葩天地网欢迎你！"; ``` 此代码将 ID 为 `innerHTMLtxt` 的元素内容替换为 `"奇葩天地网欢迎你！"`[^1]。 #### 3. 替换复杂内容 `innerHTML` 不仅可以设置纯文本，还可以设置包含 HTML 标签的内容。例如： ```javascript var mychar = document.getElementById("con"); mychar.innerHTML = "<strong>hello WorldW!</strong>"; ``` 上述代码将 ID 为 `con` 的元素内容替换为带有 `<strong>` 标签的加粗文本[^3]。 #### 4. 注意事项 - **安全性问题**：如果直接将用户输入的内容赋值给 `innerHTML`，可能会导致 XSS（跨站脚本攻击）。因此，在处理用户输入时需要格外小心。 - **性能问题**：频繁修改 `innerHTML` 可能会影响页面性能，尤其是在处理大量 DOM 元素时。 ### 示例代码以下是一个完整的示例，展示如何使用 `innerHTML` 获取和设置元素内容： ```html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innerHTML 示例</title> <script type="text/javascript"> function showOriginalContent() { var element = document.getElementById("content"); alert("原始内容: " + element.innerHTML); } function updateContent() { var element = document.getElementById("content"); element.innerHTML = "新内容"; } </script> </head> <body> <h2 id="content">初始内容</h2> <p><button onclick="showOriginalContent()">显示原始内容</button></p> <p><button onclick="updateContent()">更新内容</button></p> </body> </html> ```