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에 오신걸 환영합니다.] 삽입
example.js
test.html
'웹 프로그래밍 > JAVASCRIPT' 카테고리의 다른 글
| 기존에 존재하는 요소 뒤에 새 요소를 삽입하는 insertAfter("인수","인수") 함수 (0) | 2010.04.05 |
|---|---|
| 현재 노드의 바로 다음 형제 노드를 반환 nextSibling, 이전 형제노드를 반환 previousSibling 프로퍼티 (0) | 2010.04.05 |
| 텍스트 노드 생성 createTextNode 메소드 (0) | 2010.04.05 |
| 새로만든 노드를 문서 트리 구조에 추가 appendChid 메소드 (0) | 2010.04.05 |
| 문서내에 새요소를 만드는 createElement 메소드 (0) | 2010.04.05 |