在页面完全加载后获取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？

- anoop chandran

---

你能否把innerHTML代码放在$.getJSON的success函数里面呢？ - Blue Boy

@BlueBoy 像这样吗？var loadfn = function(){ var quote = document.getElementById('quote'); console.log(quote.innerHTML); }; var dataAppend = function() { $.getJSON(forismaticAPI, template, loadfn); };它不起作用...没有错误...没有控制台日志。 - anoop chandran

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元素。

- tao

Answer 2

没有测试过，我猜测 onload 事件在文档准备好之前就已经触发了。因此，你可能需要：1）在内容被写入时设置一个标志，然后2）在第二个函数中检查该标志，如果为空，则使用 setTimeout() 再次安排它在100毫秒后运行。

- Rob

Answer 3

使用 html 函数？

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

- Pinguto