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.

make use of window.load function...if you are conforatable using jquery we have document.ready() in that case — RohitS, Oct 02 '17 at 19:30
I don't understand "so the generated DOM from that is not directly accessible". If it's on the page, on your domain, and not in another domains iframe, you can do whatever you want to it as long as you know the correct selector. — zero298, Oct 02 '17 at 19:31
the end result produced is an HTML DOM so assuming you don't have the plug in actively monitoring for DOM changes you can simply change the content within the page with script on that page — RohitS, Oct 02 '17 at 19:40
See https://stackoverflow.com/questions/1452871/how-can-i-access-iframe-elements-with-javascript There are two good answers there. — Mark, Oct 02 '17 at 20:46

score 0 · Answer 1 · answered Oct 02 '17 at 19:49

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>

How to manipulate DOM that was created via JavaScript

1 Answers1