如何检测innerHTML何时完成

Question

我已经花了很多时间搜索解决此问题的方法，但到目前为止还没有找到可以跨浏览器使用的解决方案。

我需要一个原生的JavaScript函数，它将接受一个元素并在innerHTML成功插入到dom后运行回调函数。

例如：

    var element = document.getElementById('example');
        element.innerHTML = newhtml;

    waitUntilReady(element, function(){
            //do stuff here...
    });

简而言之，我需要检查元素的内容并在innerHTML完成时触发回调。

非常感谢您的帮助。

- gordyr

---

这是你要找的吗？http://james.padolsey.com/javascript/asynchronous-innerhtml/ - noj

你为什么认为你需要一个回调函数？ - user1106925

@am不是I am - 请看我对Kolink答案的评论 - gordyr

不完全是，但这是一篇非常有趣的文章，我想感谢您提供链接。 :-) - gordyr

Answer 1

没有必要使用这样的函数。赋值给 innerHTML 会立即执行，然后继续运行任何脚本。

如果您真的需要延迟执行（比如允许浏览器重新绘制），请使用 setTimeout ，延迟设为 1（或其他短时间间隔）。

- Niet the Dark Absol

---

如果真是这样，那太好了。但这仍然让我面临着最初的问题。我正在动态插入一个脚本，紧接着附加HTML，该脚本将事件附加到新HTML中包含的某些元素。虽然在大多数浏览器上都可以正常工作，但旧版IE 8及以下版本似乎有50％的时间返回元素为空。我的假设是，这是因为我尝试在新插入的HTML“准备就绪”时，不总是能够附加事件。 - gordyr

我正在做类似于以下代码：element.innerHTML = "<div style='width='100%;'></div>"; 但是在下一行，element.children[0].offsetWidth返回值为0，我猜测这是因为它还没有被渲染出来。这是在最新的Chrome浏览器中。有人有什么想法吗？ - pilavdzice

@pilavdzice - 请阅读此内容：https://dev59.com/-nRA5IYBdhLWcg3w8SaJ - biphobe

您可能还需要再次获取元素，只需重复代码的第一行，并使用getElementById。 - D.Bugger

这在Chrome 76中是不正确的。当设置innerHTML并在新标记内调用getElementByID以获取元素时，结果50％的时间为undefined。 - Hackstaar