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调用返回时创建。将代码从ajax调用的onload移至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()调用之后，您可以运行函数的第一时间，即使用id quote创建一个DOM元素。

Answer 2

没有测试，我的猜测是onload在文档就绪之前就开始了。所以你可能想要1）在写入内容时设置一个标志，然后2）检查第二个函数，如果为null，则使用setTimeout（）在100毫秒内再次运行它。

Answer 3

使用 html 功能？

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

页面加载完成后获取innerHTML

3 个答案: