页面完全加载后获取innerHTML答案

【问题标题】：Get innerHTML after the page loads completely页面完全加载后获取innerHTML
【发布时间】：2017-04-11 16:41:35
【问题描述】：

我正在尝试使用带有推文按钮的随机报价机来推文报价。随机报价即将出现。代码..

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？

【问题讨论】：

你能把 innerHTML 代码放在 $.getJSON 内的成功函数中吗？
@BlueBoy 喜欢这个？ var loadfn = function(){ var quote = document.getElementById('quote'); console.log(quote.innerHTML); }; var dataAppend = function() { $.getJSON(forismaticAPI, template, loadfn); }; 它不工作..没有错误..没有控制台日志

标签： javascript jquery

【解决方案1】：

您的#quote 元素是在window.onload 事件之后创建的，因为它仅在您的ajax 调用返回时创建。将代码从 onload 移动到 ajax 调用的 success，正如 cmets 中建议的 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() 调用之后运行您的函数的第一个时刻，它正在创建一个带有 id 和 quote 的 DOM 元素。

【讨论】：

【解决方案2】：

如果不对其进行测试，我的猜测是 onload 在文档准备好之前触发。因此，您可能希望 1）在写入内容时设置一个标志，然后 2）检查第二个函数，如果为 null，则使用 setTimeout() 安排它在 100 毫秒内再次运行。

【讨论】：

【解决方案3】：

使用 html 功能？

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

【讨论】：