JavaScript DOM对象之innerHTML属性简介说明


摘要:
下文讲述DOM对象之innerHTML属性的功能简介说明,如下所示:


DOM之innerHTML属性说明

DOM之innerHTML属性:
用于获取DOM元素中的html内容或设置DOM元素中的html内容,
innerHTML属性是一个可读可写属性。
DOM之innerHTML语法说明:
1.获取元素中的html内容
htmlContent=domObj.innerHTML
——参数说明—-
domObj:待获取html内容的html元素
htmlContent:innerHTML属性返回的html信息
2.设置元素中的html内容
domObj.innerHTML=htmlContent
——参数说明—-
domObj:待设置html内容的html元素
htmlContent:即将放入html元素中的html内容

DOM之innerHTML属性注意事项:
1.此属性目前可运行于市面上所有浏览器上
2.innerHTML属性值获取时,会将DOM元素下所有子元素都获取
3.innerHTML属性值设置时,会擦除DOM元素下所有信息,然后再将新的html信息写入


DOM之innerHTML属性举例演示

例:
DOM innerHTML属性应用举例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---DOM innerHTML属性举例说明
</title>
<style>
  p{
    width:100px;
	height:100px;
	line-height:100px;
	padding-left:10px;
	background-color:green;
	color:white;font-weight:bold;
  }
</style>
<script> 
window.onload=function(){

  let btn1 = document.getElementById("btn1");
  let btn2 = document.getElementById("btn2");
  
  //设置innerHTML属性
  btn1.onclick = function(){
	let odiv = document.getElementById("container");
      odiv.innerHTML = "<p>猫猫教程</p>"; 
  }

  //获取innerHTML属性
   btn2.onclick = function(){
	let odiv = document.getElementById("container");
      alert(odiv.innerHTML); 
  }

  
}
</script>
</head>
<body>
<div id="container"></div>

<div><input type="button" id="btn1" value="innerHTML属性设置" /></div>
<div><input type="button" id="btn2" value="innerHTML属性获取" /></div>
</body>
</html>


代码解析:
使用innerHTML向html元素中写入信息后,浏览器会将写入的信息进行解析,然后输出

DOM对象之innerHTML属性举例说明

DOM对象之innerHTML属性举例说明