如何使用JavaScript在另一个div上添加div？

Question

首先，我有这个：

现在，我想做的是，对某些节点进行“缩放”。双击某些节点后，我想在页面上看到整个节点：

现在，因为每次我缩放一个节点 - 我看到同样的事情（一个大圆圈），我想做到这一点：一旦我双击一个节点 - 只需要添加一个新的div，它将具有圆圈，它将与其容器重叠。我正在使用Raphael，因此应该用Raphael绘制圆圈。

我应该如何使用JavaScript？ （添加新的div与圆圈将重叠容器，并用Raphael绘制圆圈，这应该不难，但div的创建是我被卡住的部分）

到目前为止我所做的是：

zoomDiv = document.createElement('div');
zoomDiv.id = 'graph-zoom';
zoomDiv.style.position = 'absolute';
zoomDiv.style.zIndex = 2000;
this.container.appendChild(zoomDiv);

当我转到HTML时，我可以看到div被添加到容器中：

但它太低了。我不知道这是不是为什么我到目前为止看不到空div还是其他的东西？

Answer 1

此示例演示了javascript中div的{​​{3}}，如何creation和append来自document.body，CSS的使用remove : absolute;和CSS position将元素放在一起。

CSS

#parent {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 300px;
    z-index: 0;
    background-color: yellow;
}
#child {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 300px;
    z-index: 1;
    background-color: green;
}

HTML

<div id="parent">
    <button id="open">Open</button>
</div>

的Javascript

var parent = document.getElementById("parent");
var open = document.getElementById("open");

function addChild() {
    var div = document.createElement("div");
    var close = document.createElement("button");

    div.id = "child";

    close.id = "close";
    close.textContent = "Close";
    close.addEventListener("click", function closeSelf() {
        document.body.removeChild(div);
    }, false);

    div.appendChild(close);
    document.body.appendChild(div);
}

open.addEventListener("click", addChild, false);

在z-index

上

Answer 2

创作很容易：
 var new_div = document.createElement("div");

插入更加困难：

var your_raphael_container_parent = your_raphael_container.parentNode;
    if (your_raphael_container.nextSibling) {
      your_raphael_container_parent.insertBefore(new_div, your_raphael_container.nextSibling);
    }
    else {
      your_raphael_container_parent.appendChild(new_div);
    }