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>来执行错误恢复，以便在表后显示并将<tr>置于后面。它没有任何内容可以开始，所以当你用JS清空它时，它没有任何区别。

使用<tbody>代替<div>。

Answer 2

在这里，试试这个：

private static IEnumerable<Company> GenerateSmallCompanies()
{
    return Enumerable
        .Range(0, 10000000)
        .Select(number => new Company {EvaluatedMarketValue = number});
}

您需要将<html> <head>  <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>元素放在div中才能使其正常工作，因为浏览器会自行更正此问题。如果你通过inspect元素查看页面，你会看到浏览器已经将表移出了div，这就是你的代码没有清除任何内容的原因。

或者，正如其他答案所述，您可以使用<table>代替<tbody>。

JavaScript document.getElementById（）。innerHTML =“”无效

2 个答案: