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

Question

首先，我有这个:

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

现在，因为每次我缩放一个节点时 - 我都会看到相同的东西(一个大圆圈)，我想这样做:一旦我双击一个节点 - 只添加一个新的 div，它将具有圆圈，它将与它的容器重叠。我正在使用 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

这个例子演示了 creation javascript 中的 div，如何 append和 remove它往返于 document.body，使用 CSS position : absolute; 和 CSS z-index将元素放在彼此之上。

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

关于 jsfiddle