'Updating DOM variable when an childnode added or removed

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>

javascript dom

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Updating DOM variable when an childnode added or removed

Sources

Related Questions