我怎么监听innerHTML的修改何时渲染完成?

chenxxzhe
  • 814

例如我用button改innerHTML

<div id="test"></div>
<button onclick="add">add content</button>
<script>
    var add = function() {
        document.getElementById('test').innerHTML = '<div id="other">many div</div>'
    }
</script>

我就想知道怎么监听#test的innerHTML什么时候渲染完成,然后我就可以获取#other?

或者有其他好的办法也可以,我的目的就是动态生成DOM,然后获取这些DOM,请指教~

回复
阅读 9.6k
7 个回答

不需要监听,innerHTML的修改不是异步的,修改完之后才会进行后边代码的执行。
直接获取就可以了。
并不需要setTimeout。

scort
  • 8.4k
var add = function() {
    document.getElementById('test').innerHTML = '<div id="other">many div</div>'
    setTimeout(function(){
        //这时候就渲染好了
    },0);
}
yzllee
  • 2.7k

好像没有办法可以获取到。。
我遇到的这种情况只能用定时器一直去取#other,如果有,就代表渲染好了。。没有的话继续。。

这个来怎么监听?你那方法执行完了不就渲染完了嘛?那个函数处理机制不是从上往下吗,你吧后续的方法写在渲染方法后面啊,还有就是,你动态添加的节点,坑爹的JS是获取不到的,也就是说,你想给#other直接绑定事件,修改样式,想都别想...所以你就只能把事件处理绑定到它的父节点上

自己回答

貌似innerHTML的修改是同步的,因此可以直接取。
可以参考这个:https://segmentfault.com/a/11...

但为了保险我还是加上setTimeout

function next() {
    try {
        document.getElementById('other')
        cb();
    } catch(e){
        setTimeout(next,0);
    }
}
function cb() {console.log('loaded')}
setTimeout(next,0);

还参考了这篇:让HTML中js代码跑起来
试了img的方法不行,不知道是不是因为我没有加载真正存在的图片。

var div = document.createElement('div');
div.innerHTML = 'many div';
div.id = 'other';
document.getElementById('test').appendChild(div);

这样就可以了,而且添加完之后就可以直接获取了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏