When I load the page without the following js code, it runs fine, but when I create the html element using the DOM, how does it make a server request using the same page url,

const isHideVariants = document.querySelector("#hidevariants"); const vehiclesList = document.querySelector(".brand-vehicles-list"); let vehicles = <%- JSON.stringify(vehicles) %>; displayVehicles(); function displayVehicles() { clearVehicles(); vehicles.forEach((vehicle) => { const anchorTag = document.createElement("a"); const img = document.createElement("img"); const p = document.createElement("p"); anchorTag.href = `/vehicles/${vehicle._id}`; anchorTag.classList.add("brand-vehicle"); img.src = vehicle.thumbnail; img.alt = "vehicle thumbnail"; p.textContent = vehicle.name; anchorTag.appendChild(img); anchorTag.appendChild(p); vehiclesList.appendChild(anchorTag); }); } function clearVehicles() { while (vehiclesList.firstChild) { vehiclesList.removeChild(vehiclesList.firstChild); } }

I tested the code when I commented out the js DOM code and then it didn't make any other server requests

This is the first request

GET /brands/dodge 200 2109.074 ms - 16952

This is the second request that is triggered when I create the html DOM element

GET /brands/undefined 200 8297.877 ms - 16781