JavaScript document.getElementById().innerHTML = "" 不工作

Question

我想清除 <div> 中的内容，但如果我运行代码不起作用。 JS 的新手，希望知道它是如何工作的人的帮助！

原样编码：

<html>
<head>
    <!-- Javascript -->
    <script type="text/javascript">

        //UpdatesPlayerRoster
        function refreshRoster(){
            document.getElementById('roster').innerHTML = "";
        }
    </script>
</head>
<body>

    <div id=bodyContainer class="bodyContainer">
    <div id=playerListContainer class="playerListContainer">
        <div id=playerListHeader class="playerListHeader"><span class="playerListHeaderText">Players</span></div>
        <div id=playerListBody class="playerListBody">
        <table>
        <div id=roster>
            <tr><td>CONTENT TO BE CLEARED</td></tr>
        </div>
        </table>
    </div>

    <a href="#" onClick = "refreshRoster()">Refresh</a>
    </div>

</body>

Answer 1

您的HTML无效。使用 a validator.

您不能将 <div> 元素作为 <table> 的子元素。

您的浏览器很可能通过移动 <div> 执行错误恢复，因此它出现在 table 之后 并离开 <tr> 在后面。它没有任何内容可以开始，所以当你用JS清空它时，没有任何区别。

使用 <tbody> 而不是 <div>。

Answer 2

在这里，试试这个：

<html>
<head>
    <!-- Javascript -->
    <script type="text/javascript">

        //UpdatesPlayerRoster
        function refreshRoster(){
            document.getElementById('roster').innerHTML = "";
        }
    </script>
</head>
<body>

    <div id="bodyContainer" class="bodyContainer">
    <div id="playerListContainer" class="playerListContainer">
        <div id="playerListHeader" class="playerListHeader"><span class="playerListHeaderText">Players</span></div>
        <div id="playerListBody" class="playerListBody">

            <div id="roster">
                <table>
                    <tr><td>CONTENT TO BE CLEARED</td></tr>
                </table>
            </div>
        </div>

        <a href="#" onClick = "refreshRoster()">Refresh</a>
    </div>

</body>

您需要 <table> 元素位于 div 内部才能正常工作，因为浏览器会自行更正此问题。如果您通过检查元素查看页面，您会看到浏览器已将 table 移出 div，这就是您的代码未清除任何内容的原因。

或者，如其他答案所述，您可以使用 <tbody> 而不是 <div>。

JavaScript document.getElementById().innerHTML = "" 不工作

JavaScript document.getElementById().innerHTML = "" not working

html

javascript

innerhtml