[JavaScript] - innerHTML理解与用法

不念不忘少年蓝@ 2022-11-22 00:16 279阅读 0赞

## 定义 ##

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML (W3school)

## 语法 ##

(W3school)

tablerowObject.innerHTML=HTML

## 用法 ##

上面的解释有点抽象, 可以用几个简单的例子来帮助理解.

假如有个div

<div id="div">
    
    </div>

如果执行以下代码:

var html = "123";
    document.getElementById("div").innerHTML=html;

就会得到:

<div id="div">
    	123
    </div>

这时如果执行以下代码:

document.getElementById("div").innerHTML;

就会返回:

123

--------------------

举一个更详细的例子, 将四个网址添加到div中:

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8" />
    	<title>New Document</title>
    </head>
    <body>
    	<div id="div">
    		
    	</div>
    </body>
    
    <script> var data = ['www.baidu.com','www.tedu.com','www.sina.com','www.qq.com']; var html = ""; for(var obj of data){ html+="<a target="_blank" href='http://"+obj+"'>"+obj+"</a><br/>"; } document.getElementById("div").innerHTML=html; </script>
    </html>

得到的结果是这样的:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJvbm1vbW8_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NoYXJvbm1vbW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/619b9b805dfe496db8c6c9f71ea39ba8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 用法

JavaScript 用法 -------------------- HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script>

柔光的暖阳◎/ 2023年10月12日 21:31/ 0 赞/ 63 阅读

相关 vue3 ref 理解与用法

1. ref ref和[reactive][]一样,也是用来实现[响应式数据][reactive]的方法 2.本质 ref底层其实还是reactive,所以当运行时系统

末蓝、/ 2023年09月29日 11:42/ 0 赞/ 38 阅读

相关 [JavaScript] - innerHTML理解与用法

定义 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML (W3school) 语法 (W3school) tablerowObj

不念不忘少年蓝@/ 2022年11月22日 00:16/ 0 赞/ 280 阅读

相关 JavaScript中的innerHTML，innerHTML，value属性

一，innerHTML innerHTML在javaScript中具有双向功能，一是可以从指定的元素对象中获取内容，二是可以把自定义内容插入到指定的元素对象中去。定义

绝地灬酷狼/ 2022年11月04日 08:20/ 0 赞/ 244 阅读

相关理解JavaScript中的this用法

this在JavaScript中有着广泛的应用，无论是普通函数、还是构造函数，都可以看到this的影子。初学者非常容易误解了this的含义，现在博主使用一些简洁的例子，来将th

朱雀/ 2022年09月28日 05:50/ 0 赞/ 291 阅读

相关 javascript中innerHTML、innerText、outertHTML的区别与各自的用法

示例代码： <div id="test"> <span style="color:red">test1</span> test2 </div> test.inne

Dear 丶/ 2022年06月14日 12:13/ 0 赞/ 248 阅读

相关 JavaScript.innerHTML属性

innerHTML属性 \这个属性不是dom的组成部分，但是大多数浏览器都支持的属性第一个作用：获取文本内容 \ //获取span标签 <span id=”s

柔光的暖阳◎/ 2022年06月04日 04:57/ 0 赞/ 256 阅读

相关 JavaScript 用法

<script> 标签如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。 <script> 和 </script> 会告诉 Jav

╰+哭是因爲堅強的太久メ/ 2022年05月22日 10:29/ 0 赞/ 395 阅读

相关 javascript-高级用法

22.1 安全的类型检测为什么：typeof 不靠谱, 无法将数组从对象中区分出来， instanceof 有特殊情况，在iframe存在的情况下无法判断另一个ifra

逃离我推掉我的手/ 2022年04月23日 12:34/ 0 赞/ 335 阅读

相关 innerHTML的作用及用法。

对innerHTML的用法有些模糊，今天来总结一下： 1、innerHTML有两个作用：（1）获取对象的内容；（2）向对象插入内容；例：这是内容，由于i

古城微笑少年丶/ 2022年02月19日 05:19/ 0 赞/ 1446 阅读