javascript - 我怎么监听innerHTML的修改何时渲染完成？

Question

例如我用button改innerHTML

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

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

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

Answer 1

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

Answer 2

var add = function() {
    document.getElementById('test').innerHTML = '<p id="other">many p</p>'
    setTimeout(function(){
        //这时候就渲染好了
    },0)；
}

Answer 3

function a(callback){
//...
returen callback()
}

function b(){
//....
}

a(b);

Javascript异步编程的4种方法

Answer 4

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

Answer 5

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

Answer 6

自己回答

貌似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的方法不行，不知道是不是因为我没有加载真正存在的图片。

Answer 7

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

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