我正在通过 js 创建 div，但它没有出现在我的页面上

Question

在我的 JS 代码中，我创建了一个新的 div。我检查过，它不是null，但它没有出现在我的页面上。

这是我的代码：

  snake.push(document.createElement('div'));

  snake[0].style.width = '1000px';

  snake[0].style.height = '1000px';

  snake[0].style.background = 'red';

  snake[0].style.color = 'blue';

  console.log(snake[0]);

我曾经console.log()检查过，那snake[0]不是null

snake 是空列表： let snake = [];

为什么snake[0]页面上不显示？

Answer 1

正如其他人所评论的那样，您正在寻找的是appendChild. 此方法允许将 DOM 节点添加为其他 DOM 节点的子节点。它与复合模式密切相关。var snake = [];snake.push(document.createElement('div'));snake[0].style.width = '1000px';snake[0].style.height = '1000px';snake[0].style.background = 'red';snake[0].style.color = 'blue';console.log(snake[0]);document.body.appendChild(snake[0]);在这种情况下，我已附加snake[0]到body.

Answer 2

您已经创建了元素，但没有将其附加到 DOM。看看这里：https : //dev.to/desoga/7-javascript-methods-that-aids-dom-manipulation-kkj这是您在处理 DOM 操作时可以使用的有用方法列表。