页面加载完成后获取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();