innerHTML使用

helloworlddm發表於2018-01-09
HTML

下面是w3c給出的定義和用法：
innerHTML 屬性設定或返回表格行的開始和結束標籤之間的 HTML。
（1）返回表格行開始和結束標籤之間的HTML
舉個例子（來自w3cSchool）

<html>
<head>
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("tr1").innerHTML);
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />

</body>
</html>

點選執行結果為：
這裡寫圖片描述
（2）設定表格開始和結束之間的html
對上面的例子進行改進

<html>
<head>
<script type="text/javascript">
function setInnerHTML()
  {
    document.getElementById("tr1").innerHTML = "<th>Firstname</th> <th>Lastname</th>";
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="setInnerHTML()" value="設定表格開始和結束之間的html"/>
</body>
</html>

點選後執行結果如下：
這裡寫圖片描述

相關文章