javascript - 在页面完全加载后获取 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 调用返回时创建。将代码从 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() 调用之后，它会创建一个具有 quote 的 id 的 DOM 元素。