Trigger event when an element exists

Question

I have an empty div element:

<div class="message"></div>

At certain point of the webpage, a p tag is dynamically added to the div:

<div class="message">
  <p>Some Message</p>
</div>

The p can get removed, then added again and so.

What event should I use to listen if the div.message has a p child and execute some code?

I found this question, but it involves external plugins.

Isn't there an easy way to accomplish this?

Answer 1

Depending on your implementation and how fast you need to recognize a change, you might be able to get away with using a setInterval to periodically monitor the contents of a certain element.

var checkContents = setInterval(function(){
  if ($("div.message p").length > 0){ // Check if element has been found
    // There is a <p> element in here!!
    console.log($("div.message p").length());
  }
},1000);

The previous snippet will check for <p> elements within div.message elements every second (1000 milliseconds), and if present will log the number of them to the console.

---

Depending on your browser support requirements, you could alternatively use mutation events -

Mutation events provide a mechanism for a web page or an extension to get notified about changes made to the DOM...

var element = document.querySelectorAll('div.message')
element.addEventListener("DOMNodeInserted", function (ev) {
  // ...
}, false);