[JavaScript] - innerHTML理解与用法

不念不忘少年蓝@ 2022-11-22 00:16 194阅读 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 条评论，194人围观）

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

相关阅读

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

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

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

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

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

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

相关理解JavaScript中的this用法

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

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

相关 href=javascript用法

> href=”javascript:void(xxxx)”的一个特殊用法有一个方法openFullWindow代码如下 openFullWindow:funct

本是古典何须时尚/ 2022年08月22日 03:50/ 0 赞/ 177 阅读

相关 innerHTML与innerText区别

document 对象中有innerHTML和innerText 两个属性，这两个属性都是获取document对象的文本内容的，这两个属性间有哪些区别呢？通过几个例子

清疚/ 2022年08月07日 03:57/ 0 赞/ 169 阅读

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

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

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

相关 JavaScript.innerHTML属性

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

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

相关 JavaScript 用法

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

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

相关 innerHTML的作用及用法。

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

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

相关 JavaScript 逗号（,）用法

JavaScript 逗号（,）用法如果人表现过于平凡，可能就会被大家所忽略，这是一个很残酷的事实，想必人人都有类似不爽的经历。 JavaScript中也有很多看似...

红太狼/ 2020年05月24日 16:19/ 0 赞/ 939 阅读