Javascript - 通過innerHTML更新值時發出的問題

我試圖檢查一些javascript代碼，並且發現了一件我無法理解的確切原因。在我的html文件中，我有一個名爲test的ID，它沒有任何價值。現在，我想通過innerHTML更新此div中的文本/句子。因爲它只是用於測試目的，所以我沒有使用任何函數/事件。只需添加一個來更新值。Javascript - 通過innerHTML更新值時發出的問題

<body> 
<script type="text/javascript"> 
    var test_content = "This is new text in my test div"; 
    document.getElementById("test").innerHTML = test_content; 
</script> 
<div id="test"></div> 
</body>

現在，當我加載頁面時，它顯示測試的div內空沒什麼，但如果把DIV下面的javascript代碼，如下面，則顯示的變量的值。（注意：我沒有使用任何函數或事件，只是想在頁面加載時更新）。

<body>  
<div id="test"></div> 
<script type="text/javascript"> 
    var test_content = "This is new text in my test div"; 
    document.getElementById("test").innerHTML = test_content; 
</script> 
</body>

可以任何一個解釋我的原因嗎？提前致謝。

謝謝！
羅賓

來源

2014-07-16 Robindra Singha

，由於第一執行創建div#test前，所以目前不存在的。這就是爲什麼您的script標籤位於頁面底部或用window.onload事件監聽器包裝它們的好習慣。

<body> <script type="text/javascript"> window.onload = function() { var test_content = "This is new text in my test div"; document.getElementById("test").innerHTML = test_content; } </script> <div id="test"></div> </body>

如果您正在使用jQuery，你也可以這樣做：

$(function() { var test_content = "This is new text in my test div"; document.getElementById("test").innerHTML = test_content; });

而且因爲你似乎是在JavaScript編碼初學者，我建議你在MDN讀過一些文章，比如this one和this one。

來源

2014-07-16 13:50:22

漂亮的標準問題。需要某種'onload'！

<body>  
<div id="test"></div> 
<script type="text/javascript"> 
    document.addEventListener('DOMContentLoaded', function() { 
     var test_content = "This is new text in my test div"; 
     document.getElementById("test").innerHTML = test_content; 
    }); 
</script> 
</body>

來源

2014-07-16 13:50:06 Katana314

他問它的原因，這是一個正確的解決方案，但實際上並沒有回答這個問題。 –

Javascript在運行時即刻在被調用時執行。在第一個示例中，解析器讀取腳本標記，執行它，然後加載頁面的其餘部分（從上到下）。由於腳本在div被創建和創建之前執行，div將保持空白。這是導入onload事件的原因。 http://www.w3schools.com/jsref/event_onload.asp

來源

2014-07-16 13:51:05 Liquinaut

這種情況在第一個實例中沒有發生，原因是DOM元素'test'尚未創建。

將腳本放在div後面時，該元素已經創建，因此腳本可以執行。

通過監聽從body標籤派發的加載事件，您需要在DOM準備好後執行代碼。

body.onload =函數（）{...}

來源

2014-07-16 13:55:03 James

採取的jquery你的一個例子或者：這可以相當簡單地使用一種在線聽者如<body onload='myFunction'>或通過在JavaScript的onload處理器來完成必須編寫$(document).ready()或者你必須在最後的html代碼中編寫你的jquery代碼，並且兩者具有相同的含義，即當所有html被加載時都執行一些功能。這在這種情況下是一樣的，所有文件內容加載後都做一些功能。採取兩種情況：

情況＃1：

在這種情況下，我們的HTML作爲在第一種情況下是沒有任何事件處理程序，上面寫的JavaScript代碼，HTML引擎將開始讀取從HTML代碼從上到下，目前它會打到script標籤，它會調用JavaScript引擎。所以根據這個JavaScript代碼將被首先執行。

，如果你寫這條線document.getElementById("test").innerHTML = test_content; 爲：

var x = document.getElementById("test"); 
x.innerHTML = test_content;

則控制檯將返回null即x值將null仍然沒有裝。因爲格，因此格的值不會改變

例＃2：

script標籤被放置在最後。所以現在，所有的html都由html引擎加載，所以現在x的值將是<div id="test"></div>，現在所有的javascript代碼都將被執行而沒有任何錯誤。

我關於jQuery的$(document).ready()前面提到的......嗯，這是一個jQuery方法，但這可以在JavaScript寫成爲：

<script type="text/javascrip"> 
var start_script = function(){ 
// function to be performend 
} 
</script> 
    <body onload="start_script();"> 
    ...... 
</body>

，因爲所有的事件被觸發時，所有的HTML被加載和編譯。

來源

2014-07-16 13:55:38 anni

Javascript - 通過innerHTML更新值時發出的問題

回答

相關問題