I want the dom variable to update each time, when a child note is added or remove. Give the below as a sample code. Actually, I am facing the error in my chat application.
So in the below i want the last dom element that is added to get the blue color background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<style>
.master {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tile {
width: 160px;
height: 160px;
border: 1px solid black;
}
</style>
<body>
<div class="master">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<button id="btn">AddColor</button>
<script>
var master = document.getElementsByClassName('master')[0];
var tiles = document.getElementsByClassName('tile');
for(const singleTile of tiles) {
singleTile.style.backgroundColor = "blue";
}
let btn = document.getElementById('btn');`enter code hereenter code here
let newDiv = document.createElement('div');
newDiv.className = 'tile';
btn.addEventListener('click', () => {
master.append(newDiv)
})
</script>
</body>
</html>