Я недавно изучаю JS и столкнулся с такой проблемой. Необходимо заполнить случайно сгенерированными элементу половину страницы html. При вставке элементов в body задача выполняется, а вот при попытке вставить в div, который занимает половину страницы, нет.
Вот так все работает:
<body>
<div class="left"></div>
<div class="right"></div>
<script src="/index.js"></script>
</body>
const numBalls = 100;
const balls = [];
for (let i = 0; i < numBalls; i++) {
let ball = document.createElement("div");
ball.classList.add("ball");
ball.style.background = colors[Math.floor(Math.random() * colors.length)];
ball.style.left = `${Math.floor(Math.random() * 100)}vw`;
ball.style.top = `${Math.floor(Math.random() * 100)}vh`;
ball.style.transform = `scale(${Math.random()})`;
ball.style.width = `${Math.random()}em`;
ball.style.height = ball.style.width;
balls.push(ball);
document.body.appendChild(ball);
}
А вот так - нет:
document.getElementsByClassName("left").appendChild(ball);
