Javascript 如何使用appendChild确保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>

然后像这样将它们添加回：

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);

---

s似乎在同一个空间中堆叠在一起，而不是错开。如何使它们错开，我是否缺少一个参数？

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

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

---

因此基本上忽略了样式设置，即它们不占用任何空间。

你所说的交错是什么意思？请澄清“交错”并发布完整代码，还有一个提琴会对交错有所帮助。我的意思是，包含内容的div彼此分开显示，与像煎饼一样堆叠在彼此的顶部不同，HTML的文本节点在每个DIV之间都有空格。当添加新的子节点时，不会在它们之间插入任何空格。您可能应该使用CSS来解决这个问题，以指定它们周围所需的填充。