Know when you hear changes in DIV with Javascript

Asked

Viewed 788 times

2

Hello, good morning.

I need to compare a change in DIV1’s daughters to make a notification. This way I did may not be the best, I’m still learning. 

<div class="div1">

           <div class="filha">
           <div class="filha">
           <div class="filha"> assim que adicionado o Js precisa ter como saber </div>
           <div class="filha"> se retirado tbm precisa saber </div>

</div>

var myFunction4 = function() {
	jQuery(".div1").load(" meusite/minhaurl .div1");
};
var myFunction5 = function() {
	filhas = jQuery(".div1 .filha").length;
	//console.log(filhas);
};
setInterval(myFunction4, 10000); 
setInterval(myFunction5, 10000);
Function 4 takes the new "div1" dice and plays in the correct location. Adding a new "daughter" when it exists. (I don’t know if it moves the DOM)

Function 5 can know exactly the number of parent’s child elements (as soon as added or removed). But how to know before how many were ?

So you can compare and notify ? This is the right way ?

Is there a better ? Hugs

javascript css html5 dom

2 answers

3

Very easy, my dear friend. Especially with Jquery!

Follow the step by step:

  1. Take the html from the first div
  2. Take the html of the second div
  3. Compare the two

Simple as that!!

Now in practice it would be:

htmlDiv1 = $("#Div1").html();
htmlDiv2 = $("#Div2").html();

if (htmlDiv1 != htmlDiv2) {
    // escreva aqui o que acontece quando as duas não são mais iguais.
}

  • I don’t get it. Load puts new Ivs . daughter Inside DIV1 It is necessary to understand that there will be several daughters (or not) inside DIV1 ()

  • Actually, the code in there won’t let you know when there’s a change. I just showed you how to do the check simply, but you still have to put a setInterval() or another structure to detect it...

  • This is exactly what I’m looking for.

  • No, I don’t get it then. Don’t you have any control over what happens in html? What will add or take out the Divs is not a script created by yourself? Because in this case it is only you put in this script that adds or removes the Divs what you want to do, do not need to detect when it happens because you know when it happens. But if you really have no control then you can try using Mutationobserver.

  • I did via load because I thought it was simpler. I put via load() taking the same position via URL and playing in the same DIV.

3


To know a change of some component you can use the Mutationobserver. It is quite simple its use:

let target = document.getElementById('div-pai');

let observer = new MutationObserver(mutation => {
    // Função vai ser chamada quando tiver inserção ou remoção de algum componente filho.
});

observer.observe(target, {childList: true});

In this example I put for him to observe only the changes of the child nodes. But it is possible to make some other observations, reference.

  • So I tried with Observer. But I always have this error Uncaught Typeerror: Failed to execute 'observe' on 'Mutationobserver': Parameter 1 is not of type 'Node'. So I gave up. I’m a beginner in JS. I don’t understand pq is not a Node If I give a console.log on target I get a Null

  • It works, the problem is that in the same way as what I did with Jquery I can’t count the new changes :(

Browser other questions tagged javascript css html5 dom

You are not signed in. Login or sign up in order to post.