innerHTML 属性用于获取或替换 HTML 元素的内容。
**语法:**
~~~
Object.innerHTML
~~~
**注意:**
1.Object是获取的元素对象,如通过document.getElementById("ID")获取的元素。
2.注意书写,innerHTML区分大小写。
**我们通过id="con"获取 元素,并将元素的内容输出和改变元素内容,代码如下:**
**[![](http://img.mukewang.com/52e4cd080001f01507220418.jpg)](http://img.mukewang.com/52e4cd080001f01507220418.jpg)**
**结果:**
**[![](http://img.mukewang.com/52e4cb5c000187ce03740251.jpg)](http://img.mukewang.com/52e4cb5c000187ce03740251.jpg)**
### 任务
1\. 在右边编辑器中,第11行补充代码,通过id获取h2标签元素,并赋给变量mychar。
2\. 在右边编辑器中,第13行补充代码,使用innerHTML属性,将获取的h2标签内容修改为"Hello world!"
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "Hello world!";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>
```
- 1-7JavaScript-什么是变量
- 1-9JavaScript-什么是函数
- 2-2JavaScript-警告(alert 消息对话框)
- 2-3JavaScript-确认(confirm 消息对话框)
- 24JavaScript-提问(prompt 消息对话框)
- 2-5JavaScript-打开新窗口(window.open)
- 2-6JavaScript-关闭窗口(window.close)
- 2-7编程练习
- 3-1认识DOM
- 3-2通过ID获取元素
- 3-3innerHTML 属性
- 3-4改变 HTML 样式
- 3-5显示和隐藏(display属性)
- 3-6控制类名(className 属性)
- 4-1编程挑战