仅使用javascript在其他div上创建div

Question

我需要在另一个div之上创建一个div，但我无法访问css文件，因此一切都需要通过JavaScript完成。

这是我的错误代码：

var div = document.getElementById("down"); 
var divAbove = document.createElement("div");

    divAbove.id = "up";
    divAbove.style.background = "red";
    divAbove.style.position = "absolute";
    divAbove.style.width = "150px"
    div.appendChild(divAbove );

我看不到新的div。

Answer 1

如果您可以精确定位容器元素，则可以使用.insertBefore()

More Info (docs)

var container = document.getElementById("container"); 
var div = document.getElementById("down"); 

var divAbove = document.createElement("div");
    divAbove.id = "up";
    divAbove.style.backgroundColor  = "red";
    divAbove.style.width = "110px"
    divAbove.style.height = "60px"
    divAbove.innerHTML = "Added via JS"

    container.insertBefore(divAbove, div);

<div id='container'>
  <div id='down' style='height: 60px; width: 110px; background-color: yellow'>
     Existing element 
  </div>
</div>

Answer 2

这项工作。

var div = document.getElementById("down"); 
var divAbove=document.createElement("div");
divAbove.id = "up";
divAbove.style.background = "red";
divAbove.style.position = "absolute";
divAbove.style.width = "150px";     
divAbove.style.height= "150px";
div.appendChild(divAbove);

Answer 3

从这一点开始我会说div就在那里，但是由于divAbov.style.background = "red";中的拼写错误，它没有可见的背景。尝试修复拼写错误。

如果问题仍然存在，请在控制台日志中发布错误。

Answer 4

您无法看到新div的原因是您没有给任何机构。例如，在附加divAbove以下内容之前可能需要写一下：

divAbove.innerHTML = "Hello World";