[JavaScript] - innerHTML理解与用法

最新推荐文章于 2024-10-07 00:04:50 发布

Charonmomo

最新推荐文章于 2024-10-07 00:04:50 发布

阅读量660

点赞数 1

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/Charonmomo/article/details/109464079

版权

前端专栏收录该内容

56 篇文章 2 订阅

订阅专栏

定义

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;

就会返回:

举一个更详细的例子, 将四个网址添加到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>