insertAdjacentHTML 질문이

var products = [
            { id : 0, price : 70000, title : 'Blossom Dress' },
            { id : 1, price : 50000, title : 'Springfield Shirt' },
            { id : 2, price : 60000, title : 'Black Monastery' }
        ];

        document.querySelector('#price').addEventListener('click', function(){
            products.sort(function(a,b){
                return a.price - b.price
            });
            console.log(products)

            document.querySelector('.row').innerHTML = '';

            products.forEach((a, i) => {
                var 템플릿 = 
                `<div class="col-sm-4">
                    < img src="https://via.placeholder.com/600" class="w-100">
                    <h5>${products[i].title}</h5>
                    <p>가격 : ${products[i].price}</p>
                </div> `;
                var c = `<div></div>`;
                document.querySelector('.row').insertAdjacentHTML('beforeend', c);
            })
        })

products.forEach까지 이해가 가는데 insertAdjacentHTML이게 왜 추가가 안되는지 모르겠어요..