How to execute javascript code after an element is created without jquery?

Question

I am developing a chrome extension which would modify an element in a website. That website sends a lot of ajax call after loading the main document to get page contents (GWT framework architecture). I need to modify the content of that webpage and the element that I want to modify will be created only after all the ajax calls.

let's assume that the id of element that i want to modify is #idContainer > div > div.container.container\--wider.\\30, which will be available only after the completion of the ajax call.

so how to execute a js code (via chrome extension -> content script) after this element is available.

Note: I have seen many similar questions in stackOverflow but none of them have answers without using jQuery.

The Fool · Accepted Answer · 2019-11-05 10:20:05Z

Consider using a Mutation Observer. Here is an example of some of my projects where I had to solve the exact same problem.

// observer callback
const callback = (mutations) => {
  const matching = [];
  for (const {addedNodes} of mutations) { // for each mutation
    for (const node of addedNodes) { // iterate through all added nodes
      if (node.nodeType !== Node.ELEMENT_NODE) {
        continue; // only react to real element nodes
      }
      if (node.children[0]) { // Here you can check for what you want
        matching.push(...node.getElementsByTagName('pre'));
      }
    }
  }
  if (matching.length === 2) { // I needed the second pre tag
    ipcRenderer.send('note-result', matching[1].innerText);
  }
};

// intialize the observer with the callback
const observer = new MutationObserver(callback);
// pass a targetNode and an options object in the observe method
observer.observe(document.body, {attributes: true, childList: true, subtree: true});

In this example I was interested in the textContent of the second "pre" tag that appeared in the DOM.

You can also stop observing with the disconnect method:

observer.disconnect();

You have to adjust the code somewhat to your particular use case but this is the gist of using a mutation observer.

User863 · Accepted Answer · 2019-11-05 10:00:52Z

1

If you're writing a Chrome extension, you should probably use the chrome.webRequest API and onCompleted event

chrome.webRequest.onCompleted.addListener(function callback)

answered Nov 5, 2019 at 10:00

User863

20.1k3 gold badges20 silver badges45 bronze badges

1 Comment

Ajithkumar_sekar Over a year ago

Thanks for the suggestion. I think mutation observer will be better option here than chrome.webRequest API because on doing this i want to keep track of all ajax call happening on that page and trigger the script on completion of all the ajax calls which would be complex

Collectives™ on Stack Overflow

How to execute javascript code after an element is created without jquery?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related