How to manipulate DOM that was created via JavaScript

Question

The problem I currently run into is that I load a third party plugin via <script data-cfasync="false"> so the generated DOM from that is not directly accessible.

If it was directly accessible, then I could successfully change the DOM via

document.getElementsByClassName('conversations-header-name')[0].innerHTML = 'chatting with Chris';

Now, my question is: how can I modify the text that is created after the page was loaded and then displayed in the container of the class conversations-header-name without modifying the source code as it is a 3rd party plugin we use?

*edit The generated DOM through the plugin is displayed inside of a iframe.

Answer 1

This is something close to help..

 document.onreadystatechange = function () { var state = document.readyState; if (state == 'complete') { var e1 = document.getElementById('e1'); var e2 = document.createElement('div'); e2.setAttribute("id","e2"); e2.innerHTML = "Div 2"; e2.style.color ="red"; e1.append(e2); } }; 

 <div id="e1"> Div 1 </div>