thymeleaf和js的加載順序

對於瀏覽器來說，HTML代碼和JS代碼是一等公民，Thymeleaf相關的標籤代碼是二等公民。

先給出異常：Uncaught TypeError: Cannot read property 'innerHTML' of null。

顯然該異常說明JS訪問了HTML還沒加載出來的標籤。

    <ul id="userList" class="list-group" th:block th:each="username,usernameStat: ${allUsers}">
        <li class="list-group-item" th:text="${username}">佚名</li>
    </ul>
<script>
    document.getElementById("userList").innerHTML...
</script>

但是我的JS代碼確實寫在HTML後面，於是我想到錯誤原因是不恰當地使用thymeleaf。錯誤現象說明了thymeleaf塊加載慢於或後於JS代碼。我將待訪問的節點用純HTML語句剝離出來，那麼，JS便不會再說找不到節點。改後的代碼如下：

    <ul id="userList" class="list-group">
        <th:block th:each="username,usernameStat: ${allUsers}">
            <li class="list-group-item" th:text="${username}">佚名</li>
        </th:block>
    </ul>

問題解決。當第一個用戶進入聊天頁面後，websocket#onmessage便可以修改在線用戶列表。