웹 프로그래밍/JAVASCRIPT

기존에 존재하는 요소 뒤에 새 요소를 삽입하는 insertAfter("인수","인수") 함수

웹 개발자의 비상 2010. 4. 5. 22:47


 //기존에 존재하는 요소 뒤에 새 요소를 삽입하는  함수 : insertBefore의 반대
 function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
   parent.appendChild(newElement);
  } else {
   parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

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 insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
   parent.appendChild(newElement);
  } else {
   parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

//페이지에 출력한 내용설정 함수
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 요소 앞으로 삽입
 insertAfter(dvp, selimg);                                                                         //selimg 요소 뒤으로 삽입
 dvp.appendChild(para);
 para.appendChild(txt1);
 para.appendChild(bd);
 bd.appendChild(txt2);
 para.appendChild(txt3);
}


addLoadEvent(docp);

728x90

'웹 프로그래밍 > JAVASCRIPT' 카테고리의 다른 글

Number 객체  (0) 2011.01.19
객체의 개요  (0) 2011.01.19
현재 노드의 바로 다음 형제 노드를 반환 nextSibling, 이전 형제노드를 반환 previousSibling 프로퍼티  (0) 2010.04.05
기존에 존재하는 요소 앞에 새 요소를 삽입하는 insertBefore 메소드  (0) 2010.04.05
텍스트 노드 생성 createTextNode 메소드  (0) 2010.04.05

'웹 프로그래밍/JAVASCRIPT'의 다른글

  • 현재글기존에 존재하는 요소 뒤에 새 요소를 삽입하는 insertAfter("인수","인수") 함수

관련글

댓글

티스토리툴바