Question

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

2019-11-11

179

javascript html

在我的 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

您已创建元素，但尚未将其附加到 DOM。请看这里： https://dev.to/desoga/7-javascript-methods-that-aids-dom-manipulation-kkj

这是在进行 DOM 操作时可以使用的有用方法的列表。

Answer 2

正如其他人所评论的那样，您正在寻找的是 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 。