DOM编程之innerHTML和innerText操作div和span

innerHTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				background-color: aqua;	
				 200px;
				height: 200px;
			}
		</style>
  </head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					//设置div内容
					//1、获取div对象
					var divElt = document.getElementById("div1");
					//使用innerHTML属性来设置元素内部的内容
					divElt.innerHTML = "<font color='red'>这是innerHTML</font>";
				}
			}
		</script>
		<input type="button" value="设置div中的内容" id="btn" />
		<div id="div1"></div>
	</body>
</html>

在这里插入图片描述
点击按钮：

innerText

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				background-color: aqua;	
				 200px;
				height: 200px;
			}
		</style>
  </head>
	<body>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
					//设置div内容
					//1、获取div对象
					var divElt = document.getElementById("div1");
					//使用innerText属性来设置元素内部的内容
					divElt.innerText = "<font color='red'>这是innerText</font>";
				}
			}
		</script>
		<input type="button" value="设置div中的内容" id="btn" />
		<div id="div1"></div>
	</body>
</html>

在这里插入图片描述

innerText和innerHTML属性的区别

相同点：都是设置元素内部的内容。
不同点：innerHTML会把后面的"字符串“当做一段HTML代码解释并执行。innerText是即使后面是一段HTML代码，也只是将其当做普通的字符串来看待。