웹 프로그래밍/JAVASCRIPT

기존에 존재하는 요소 앞에 새 요소를 삽입하는 insertBefore 메소드

웹 개발자의 비상 2010. 4. 5. 21:46

insertBefore

: 기존에 존재하는 요소 앞에 새요소를 삽입 시키는 메소드

parentElement.insertBefore(newElement, targetElement) //newElement:새로만든 요소 targetElement:뒤에 출력되는 요소)

ex)
//test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=euc-kr" />
 <title>Testing</title>
 <link rel="stylesheet" type="text/css" href="./layout.css" media="screen" />
 <script type="text/javascript" src="example.js"></script>
</head>

<body>
<h1>돋보기 포트폴리오</h1>
<ul id="selimg">
 <li><a href="http://www.dotbogi.co.kr/board/table/mn03_01/upload/100107_120019.jpg"  title="www.neo-eng.net"/ ><img src="http://dotbogi.co.kr/board/table/mn03_01/upload/100107_120011.jpg"></a><p>| 네오이엔지</p></li>
 <li><a href="http://www.dotbogi.co.kr/board/table/mn03_01/upload/100107_115907.jpg"  title="www.2000green.com"/ ><img src="http://dotbogi.co.kr/board/table/mn03_01/upload/100107_115859.jpg"/></a><p>| 이천농촌체험관광</p></li>
 <li><a href="http://www.dotbogi.co.kr/board/table/mn03_01/upload/100107_115748.jpg"  title="www.siwuri.com"/ ><img src="http://dotbogi.co.kr/board/table/mn03_01/upload/100107_115742.jpg"/></a><p>| 시우리</p> </li>
 <li><a href="http://www.dotbogi.co.kr/board/table/mn03_01/upload/091123_105935.jpg"  title="www.myfarm.or.kr"/ ><img src="http://dotbogi.co.kr/board/table/mn03_01/upload/091123_105932.jpg"/></a><p>| 채운산장 </p></li>
 <li><a href="http://www.dotbogi.co.kr/board/table/mn03_01/upload/100107_115205.jpg"  title="www.bellhouse.co.kr"/ ><img src="http://dotbogi.co.kr/board/table/mn03_01/upload/100107_115201.jpg" /></a><p>| 벨하우스</p></li>
</ul>


</body>
</html>

//example.js
//페이지 로딩후 뿌려질 항수들의 위한 함수

 function addLoadEvent(func) {
  var oldonload = window.onload;
  if(typeof window.onload != 'function') {
   window.onload = func;
 }else{
  window.onload = function() {
   oldonload();
   func();
  }
 }
 }

//페이지에 출력한 내용설정 함수
function docp() {
 var  dvp = document.createElement("div");
 dvp.setAttribute("id", "dvp");
 var para = document.createElement("p");
 var txt1 = document.createTextNode("안녕하세요 ");
 var bd = document.createElement("b");
 var txt2 = document.createTextNode("dotbogi:www.dotbogi.co.kr");
 var txt3 = document.createTextNode("에 오신걸 환영합니다."); 
 //document.getElementsByTagName("body")[0].appendChild(dvp);           //마지막 요소로 삽입
 selimg.parentNode.insertBefore(dvp, selimg);                                           //selimg 요소 앞으로 삽입
 dvp.appendChild(para);
 para.appendChild(txt1);
 para.appendChild(bd);
 bd.appendChild(txt2);
 para.appendChild(txt3);
}


addLoadEvent(docp);

결과 : 문서내 selimg 앞 [안녕하세요 dotbogi:www.dotbogi.co.kr에 오신걸 환영합니다.] 삽입



728x90