通过按下按钮创建 div [重复]

Question

我试图通过单击按钮来创建 Div，但它只是用红色填充按钮范围。

<div class="app">
  <button onclick="createDiv()">Make a cube</button>
</div>
<script>

  function createDiv ()
  {
  var boxEle = document.querySelector('.app');
  boxEle.style.width = 100;
  boxEle.style.height = 100;
  boxEle.style.backgroundColor = '#f00';

  }
</script>

Answer 1

你不会偏离太多。您正在选择已在 html 中创建的 div，并且您的某些 js 语法已关闭。
试试this jsFiddle

function createDiv ()
  {
  var boxEle = document.createElement('div');
  var container = document.querySelector('.app');
  boxEle.style.width = '100px';
  boxEle.style.height = '100px';
  boxEle.style.backgroundColor = '#f00';
  container.appendChild(boxEle);
  }

Answer 2

首先，在您的函数中，您在 html 中选择了一个已经创建的 div，因此您没有创建一个 div。如果你想使用 javascript 创建一个 div，你可以这样做。

function createDiv() {
let box = document.createElement('div'); // creates div
box.classlist.add('box-styling') // you can add a class and style it using that instead 
let container = document.querySelector('.container') // div has to be placed somewhere in html, so create a container and select it.
container.appendChild(box) // then append to container


}

Answer 3

应该这样做：

<div class="app">
  <button onclick="createDiv()">Make a cube</button>
</div>
<script>

function createDiv () {
    var boxEle = document.querySelector('.app');
    var newDiv = document.createElement('div');
    newDiv.style.width = 100;
    newDiv.style.height = 100;
    newDiv.style.margin = 5;
    newDiv.style.backgroundColor = '#f00';
    boxEle.appendChild(newDiv);
}
</script>