為什么document.getElementById在我的腳本中不起作用？

Question

我正在編寫使用javascript而不是框架的框架網站模板，我遇到了document.getElementById("contentbody").innerHTML=body[i];問題document.getElementById("contentbody").innerHTML=body[i]; 但是，我沒有看到任何錯誤。 開發。 控制台告訴我TypeError: document.getElementById(...) is null ，這沒有任何意義，因為只有在沒有具有此類id的元素（並且存在）時它才返回null。

<table style="width: inherit;">
<tr>
<td style="width: 220px;">
    <h2 style="text-align: center;">titlehere</h2>
    <div id='menubody' />
</td>
<td>
    <h1 id='contenttitle' />
    <div id='contentbody' />
</td>
</tr>
</table>
<script>
    var title =
    [
    "&lt;p&gt;",
    "&lt;div&gt;"
    ];
    var body =
    [
    "&lt;p&gt; is for text",
    "&lt;div&gt; is for cool text"
    ];
    function change(i)
    {
        document.getElementById("contenttitle").innerHTML=title[i];
        document.getElementById("contentbody").innerHTML=body[i];
    }
    change(0);
</script>

有幫助嗎？ 建議？

Answer 1

沒有<h1 />或<div />元素。 你想要的是<h1></h1>和<div></div>

Answer 2

這里的標簽

<div id='contentbody' />

你把它寫成<div /> ，這是錯誤的，因為在HTML中沒有自動關閉的div標簽（或者至少沒有意義）。

檢查w3schools上的 div標簽，w3.org和MDN 上的div標簽了解更多詳情

Answer 3

更新<h1>標記以獲得結束標記。 這是一個小提琴。

http://jsfiddle.net/fPsaK/

<table style="width: inherit;">
    <tr>
        <td style="width: 220px;">
             <h2 style="text-align: center;">titlehere</h2>

            <div id="menubody" />
        </td>
        <td>
            <h1 id="contenttitle"></h1>
            <div id="contentbody"></div>
        </td>
    </tr>
</table>