如何將Javascript數據打印到HTML DOM中？

Question

我正在嘗試將JS數據打印到HTML DOM中。 我無法打印。 我做錯了什么？

<!DOCTYPE html>
<html>

    <head>
        <title>JSON</title>
        <script type="text/javascript">
            // user is the property of obj1
            var obj1 = {
                user: "John",
                age: 26,
                country: "United States"
            };
            document.getElementById("results").innerHTML = obj1.user + "<hr>";
        </script>
    </head>

    <body>
        <div id="results"></div>         <---- Expected to see John HERE
    </body>

</html>

在我的控制台中

Uncaught TypeError: Cannot set property 'innerHTML' of null

這是我的JSFiddle

Answer 1

出現錯誤的原因是因為您在head部分中指定了腳本，因此在創建id="results"的HTML元素之前執行腳本

與其將腳本導入到head部分中，不如將其導入到結束body標記</body>

    <body>
        <div id="results"></div>         <---- Expected to see John HERE
        <script type="text/javascript">
            // user is the property of obj1
            var obj1 = {
                user: "John",
                age: 26,
                country: "United States"
            };
            document.getElementById("results").innerHTML = obj1.user + "<hr>";
        </script>
    </body>

Answer 2

當document.getElementById("results").innerHTML = obj1.user + "<hr>";時，帶有results ID的div尚未加載document.getElementById("results").innerHTML = obj1.user + "<hr>"; 在Javascript中被稱為。

因此window.onload只能用於在加載文檔時執行Javascript代碼。

 <!DOCTYPE html> <html> <head> <title>JSON</title> <script type="text/javascript"> // user is the property of obj1 window.onload = function() { var obj1 = { user: "John", age: 26, country: "United States" }; document.getElementById("results").innerHTML = obj1.user + "<hr>"; } </script> </head> <body> <div id="results"></div> <---- Expected to see John HERE </body> </html>

另一種方法是將script標記（如OP文章中的window.onload一樣）放在<div id="results"></div>后面，以便在執行JavaScript代碼之前加載div。

Answer 3

解決這個問題的方法可能不只一種，但是我通過等待窗口加載來解決我的問題：

window.onload = function()
{
    // my JSCodeHERE
}

如何將Javascript數據打印到HTML DOM中？

問題描述

3 個解決方案

解決方案1
1 2015-06-10 00:43:31

解決方案2
1 已采納 2015-06-10 00:45:35

解決方案3
1 2015-06-10 00:47:25

如何將Javascript數據打印到HTML DOM中？

問題描述

3 個解決方案

解決方案1 1 2015-06-10 00:43:31

解決方案2 1 已采納 2015-06-10 00:45:35

解決方案3 1 2015-06-10 00:47:25

解決方案1
1 2015-06-10 00:43:31

解決方案2
1 已采納 2015-06-10 00:45:35

解決方案3
1 2015-06-10 00:47:25