Question

我正在尝试进行一些<div>操作，删除一些并添加其他操作。我有一个父<div>，其中包含<div>个数字：

<div id='parentdiv' style='width:100%;height:100%;overflow:auto;'>
   <div id = 'div1' style='width:100%;height:400px;'>
      <canvas></canvas>
   </div>
   <div id='div2' style='width:100%;height:400px;'>
      <canvas></canvas>
   </div>
   <div id='div3' style='width:100%;height:400px;'>
      <canvas></canvas>
   </div>
</div>

当最初创建<div>时，它们都按预期分开，即彼此交错。但是，如果我删除所有这样的初始<div>：

var elem = document.getElementById("div" + c);
if (elem != null) {
    elem.parentNode.removeChild(elem);
}

并将其添加回来：

var elem = document.getElementById("parentdiv");
var d = document.createElement("div");
d.id = "div" + c;
d.style = "width:100%;height:400px;";
elem.appendChild(d);

<div>似乎在同一个空间中叠加在一起而不是错开。如何让它们错开，我错过了参数吗？

Answer 1

为了防止别人犯同样的错误，设置div的样式不能通过字符串处理，每个单独的属性需要像这样设置

d.style.width = "100%";
d.style.height = "400px";

所以风格设置基本上被忽略了，即它们没有占用空间。

如何使用appendChild确保div错开

1 个答案: