在完全加载页面后获取innerHTML

Question

我试图使用tweet按钮随机引用机器来鸣叫报价。 随机报价即将上涨。 代码..

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(…) ..因为在加载报价延迟小，窗口加载函数返回一个空。只有当内容被加载并准备好时，如何才能获得div的innerHTML？

Answer 1

您的#quote元素是在window.onload事件之后创建的，因为它仅在返回您的ajax调用时创建。将代码从onload移至ajax调用的success，如BlueBoy在评论中提示。在你的情况下，成功功能就是你所说的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()调用之后，该调用创建了一个DOM元素，id为quote。

Answer 2

没有测试它，我的猜测是在文档准备好之前onload已经被触发了。所以你可能想要1）当内容被写入时设置一个标志，然后2）检查第二个函数，如果null使用setTimeout（）将它安排在100 ms内再次运行。

Answer 3

使用html函数？

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