VS Code Live Server 扩展添加/复制现有的 HTML 元素

Question

I'm using the Liver Server extension in VS Code to see the result of some HTML/JS I'm experimenting with, however, it appears Live Server is injecting it's own duplication of one of the HTML elements (in this case an empty div) and joining it onto the bottom of the document. I'm fairly certain Live-Server is the issue here because I've had a look at my code on Codepen and the issue does not appear.

I hope providing a link to Codepen is ok: https://codepen.io/UnmadeBed/pen/PoEoMKy

main.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);

Answer 1

Solved. It turns out I was accidentally styling a hidden div used by Live Server, as opposed to Live Server duplicating anything.