innerHTML 屬性用于獲取或替換 HTML 元素的內容。
**語法:**
~~~
Object.innerHTML
~~~
**注意:**
1.Object是獲取的元素對象,如通過document.getElementById("ID")獲取的元素。
2.注意書寫,innerHTML區分大小寫。
**我們通過id="con"獲取 元素,并將元素的內容輸出和改變元素內容,代碼如下:**
**[](http://img.mukewang.com/52e4cd080001f01507220418.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編程挑戰