頁面加載完成后獲取innerHTML

Question

我正在嘗試使用推文按鈕制作隨機報價機器來推文。 隨機報價即將到來。 編碼..

var forismaticAPI = 'http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?';
$(document).ready(function() {
    var template = function(data) {
        $('#quotearea').empty();
        $('#quotearea').append('<blockquote id="quote">' + data.quoteText + '</blockquote>' + '<p id="author"> —  ' + data.quoteAuthor + '</p>');
        $('#quotearea').show();
    };

    var dataAppend = function() {
        $.getJSON(forismaticAPI, template);
    };
}

我的下一個任務是獲取推文內容。 因此，一旦窗口完全加載，我想獲得包含引用的#quote的innerHTML。 所以我寫了一個這樣的window.onload函數..

window.onload = function(){
    var quote = document.getElementById('quote');
    console.log(quote.innerHTML);

}

但是我得到一個錯誤Uncaught TypeError: Cannot read property 'innerHTML' of null(…) 。由於加載引號有小的延遲，窗口加載函數返回null。 如何在內容加載和准備好的時候獲取div的innerHTML？

Answer 1

你的#quote元素是在window.onload事件之后創建的，因為它只在你的ajax調用返回時創建。 正如BlueBoy在評論中建議的那樣，將代碼從onload移動到ajax調用的success 。 在您的情況下，成功函數是您命名template函數。

您可以在創建元素后立即訪問它：

var template = function(data) {
    $('#quotearea').empty();
    $('#quotearea').append('<blockquote id="quote">' + data.quoteText 
    + '</blockquote>' + '<p id="author"> —  ' + data.quoteAuthor + '</p>');
    $('#quotearea').show();

    console.log(document.getElementById('quote'));
};

您不能在尚不存在的DOM元素上調用innerHTML方法。 所以你可以運行你的函數的第一刻是在append()調用之后，它正在創建一個帶有id和quote的DOM元素。

Answer 2

沒有測試它，我的猜測是onload在文檔准備好之前觸發。 所以你可能想要1）在寫入內容時設置一個標志，然后2）檢查第二個函數，如果為null，則使用setTimeout（）在100毫秒內再次運行它。

Answer 3

使用html函數？

var code = $('#quotearea').html();