Estoy usando la extensión Liver Server en VS Code para ver el resultado de algunos HTML/JS con los que estoy experimentando, sin embargo, parece que Live Server está inyectando su propia duplicación de uno de los elementos HTML (en este caso, un div vacío ) y unirlo en la parte inferior del documento. Estoy bastante seguro de que Live-Server es el problema aquí porque he echado un vistazo a mi código en Codepen y el problema no aparece.
Espero que esté bien proporcionar un enlace a Codepen: https://codepen.io/UnmadeBed/pen/PoEoMKy
principal.js:
// grab elements from HTML doc const body = document.querySelector('body'); // container to hold the grid divs const containerDiv = document.createElement('div'); containerDiv.style.backgroundColor = 'red'; containerDiv.style.height = '500px'; containerDiv.style.width = '500px'; body.appendChild(containerDiv); const div = document.createElement('div'); containerDiv.appendChild(div);
Resuelto. Resultó que accidentalmente estaba diseñando un div oculto utilizado por Live Server, en lugar de que Live Server duplicara cualquier cosa.