JavaScript로 다른 div 위에 div를 추가하는 방법은 무엇입니까?

Question

우선, 다음과 같습니다.

이제 노드의 "확대/축소"를하고 싶습니다. 일부 노드를 두 번 클릭하면 페이지의 전체 노드를보고 싶습니다.

노드를 확대 할 때마다 (큰 원) 이것을하기 위해서 : 일단 노드를 더블 클릭하면 추가 될 새로운 div만이 원을 가지며 컨테이너와 겹칠 것입니다. 나는 Raphael으로 일하고 있으므로 원은 Raphael에서 그려야합니다.

JavaScript로 어떻게해야합니까? (컨테이너를 겹칠 원과 함께 새 div를 추가하고 Raphael을 사용하여 원을 그립니다. 어렵지 않아야하지만 div의 생성은 내가 붙어있는 부분입니다)

지금까지 내가 한 것 입니다 :

을하지만 너무 낮 : 나는 HTML에 갈 때, 나는 DIV 컨테이너에 추가 된 것을 볼 수 있습니다

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

. 왜 지금까지 빈 div를 볼 수 없는지 또는 다른 것인가가 이것이 문제인지 나는 모른다.

Answer 1

이 예는 그것과에서 어떻게 append 및 remove, 자바 스크립트에서 div의 creation 보여줍니다
var new_div = document.createElement("div");

삽입이 조금 더 어렵다 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> 

자바 스크립트

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

방금 ​​새로운 div 이하의 내용으로 사업부를 만들기 위해 찾고 계십니까 jsfiddle

Answer 2

만들기는 간단합니다 :

이

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