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节点的子代。它与composite pattern密切相关。

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操作时可以使用的有用方法的列表。

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

2 个答案: