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

首先，我有： enter image description here 如何使用JavaScript在另一個div上添加div？

現在，我想要做的是，使一些節點的「縮放」。一旦我雙擊了一些節點，我想看到頁面上的整個節點： enter image description here

現在，因爲每次我縮放一個節點 - 我看到相同的東西（一個大圓圈），我想要做到這一點：一旦我雙擊一個節點 - 只有一個新的div將被添加，將有圓圈，它會重疊它的容器。我正在與Raphael合作，所以圈子應該拉斐爾繪製。

我該怎麼用JavaScript做到這一點？（添加新的div與容器重疊的圓圈，並用拉斐爾繪製圓圈，這應該不難，但創建div是我卡住的部分）

我到目前爲止所做的是：

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

當我去到HTML，我可以看到，在div被添加到容器： enter image description here

但實在是太低了。我不知道這是爲什麼我目前看不到空的div或者是其他的東西嗎？

來源

2013-05-06 Belphegor

你只是在尋找創建一個新的div或與該內容的DIV放大節點？ – 2013-05-06 09:49:23

只創建一個新的div。之後我將處理包含節點的數據，但現在，我只需要創建一個像第二個圖像上顯示的新div。 – Belphegor 2013-05-06 09:50:45

var newDiv = document.createElement（「div」） - 這將爲您提供一個新的div。將該元素添加到某個父級div併爲其賦予一個樣式類，該級別將具有更高的z-index，以便它將重疊原始節點 – 2013-05-06 09:52:13

這個例子演示了在JavaScript中div的creation，如何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

來源

2013-05-06 10:01:34 Xotic750

這工作。 Tnx很多幫助！ – Belphegor 2013-05-06 12:20:44

創作很簡單：
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); 
    }

來源

2013-05-06 09:54:06 Cherniv

謝謝@Cherniv的幫助，但我解決了Xotic750建議的問題。乾杯! – Belphegor 2013-05-06 12:37:32

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

回答

相關問題