How to track addition on HTML element under a particular div?

Question

I need to add a listener that tracks element addition/deletion under an element/div.

I have added onchange listener to the parent element but it did not work.

<div class="class1" onchange="myfunc(this)">
    <input name="in"/>
    <!-- Track element addition/deletion here -->
</div>

I need to add a listener to the div that listens to element addition/deletion (append/remove) in the div.

By addition/deletion you mean add a element of input in it or anything else? — Alireza HI, Jul 17 '19 at 11:12
Can you show us your `myfunc` function? Waht exactly "doesn't work"? — Gilsido, Jul 17 '19 at 11:12
I don't think there's any native way to listen to something like this. `onchange` does not work like that and it definitely does not work on a `div` element. You need to funnel all your rendering functions into a new function that tracks the html changes to your target element instead — Abana Clara, Jul 17 '19 at 11:14
You haven’t told, or shown, us enough about what your code does, how it does it, what’s going wrong or what you expected. How are elements being added or deleted? Please read the “[mcve]” and “[ask]” guidelines. — David Thomas, Jul 17 '19 at 11:14
I need to call myFunc() whenever a child is added/deleted to the div. — Melvin, Jul 17 '19 at 11:17

Faiz Khan · Answer 1 · 2019-07-17T11:22:24.130

if you want to track the removal or addition of a div inside another div then you should track the number of child divs inside the parent.

You can do it in many ways like by using property childNodes:

element.childNodes

It will give you all the divs inside a parent div and you can now track the number of divs inside a div.

To do this task easily you can go with reactjs.where you have lifecycle methods which can be useful here

obscure · Answer 2 · 2019-07-17T11:30:54.480

The onchange event doesn't track changes to the DOM. Fortunately JavaScript offers a pretty powerful API that does this job: MutationObserver.

Usage is pretty simple:

Reference the element you want to track for changes

var target = document.getElementsByClassName('class1');

Create a new instance of MutationObserver

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList") {
      console.log("an element has been added!");
    }
  });
});

Tell it to track changes to the DOM - which is done by the childList property

var config = {
  childList: true,
};

and start observing

observer.observe(target[0], config);

Here's a complete example:

var target = document.getElementsByClassName('class1');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "childList") {
      console.log("an element has been added!");
    }
  });
});

var config = {
  childList: true,
};
observer.observe(target[0], config);

function addDiv() {
  var theDiv = document.createElement("div");
  theDiv.innerText = "I'm a div";
  target[0].appendChild(theDiv);
}

<div class="class1">
  <input name="in" />
</div>
<button onclick="addDiv()">
Add
</button>

How to track addition on HTML element under a particular div?

2 Answers2