DOM 라운드박스 심플

먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다.
그런데 굳이 가로가 일정치라면  그방법대로 할필요가 없다.
이번엔 가로 사이즈가 정해진경우

목적은
태그
<div id="cb>내용물</div> 여기에 앞뒤로 라운딩그림을 추가해주는것이다.
dom으로 생성할 코드는
<div id="cbbt"></div> //위 라운드박스
<div id="cb>내용물</div>
<div id="cddd"></div> //아래 라운드박스

//먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 
//두함수의 기능은
insertBefore(A, B); :B 엘레먼트앞에 A를 삽입
insertAfter(A, B);   :B 엘레먼트뒤에 A를 삽입

//먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다.
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function displaydivision(){
     if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // 모든 div를 검색
 var cb = document.getElementById("cb"); //cb라는id를 얻는다.
 var bottom = document.createElement("div"); //div태그생성 변수명은 bottom
 bottom.id="cbbb"; // 생성된 태그의 아이디를 cbbb로지정
 insertAfter(bottom, cb); //insertAfter을 이용해서 cb 아래에 만들어준다.

 var header = document.createElement("div");//역시 div태그 생성 변수명은 header
 header.id="cbbt"; //생성된 태그 아이디를 cbbt
 cb.parentNode.insertBefore( header, cb); // nsertBefore를 이용해서 cb위에 만들어준다.
}