Question

我正在编写使用javascript而非框架的框架网站模板，我遇到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标记（或者至少没有意义）。

检查div tag on w3schools，div tag on w3.org和MDN了解详情

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>

为什么document.getElementById在我的脚本中不起作用？

3 个答案: