createTextNode
: 요소가 아닌 텍스트노드를 생성한다.
document.createTextNode(text)
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>
<script type="text/javascript" src="example.js"></script>
</head>
<body>
<div id="testdiv">
</div>
</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 para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
var txt1 = document.createTextNode("안녕하세요 ");
var bd = document.createElement("b");
var txt2 = document.createTextNode("dotbogi:www.dotbogi.co.kr");
var txt3 = document.createTextNode("에 오신걸 환영합니다.");
testdiv.appendChild(para);
para.appendChild(txt1);
para.appendChild(bd);
bd.appendChild(txt2);
para.appendChild(txt3);
}
addLoadEvent(docp);
결과 : 문서내 [ 안녕하세요 dotbogi:www.dotbogi.co.kr에 오신걸 환영합니다. ] 출력
example.js
test.html'웹 프로그래밍 > JAVASCRIPT' 카테고리의 다른 글
| 현재 노드의 바로 다음 형제 노드를 반환 nextSibling, 이전 형제노드를 반환 previousSibling 프로퍼티 (0) | 2010.04.05 |
|---|---|
| 기존에 존재하는 요소 앞에 새 요소를 삽입하는 insertBefore 메소드 (0) | 2010.04.05 |
| 새로만든 노드를 문서 트리 구조에 추가 appendChid 메소드 (0) | 2010.04.05 |
| 문서내에 새요소를 만드는 createElement 메소드 (0) | 2010.04.05 |
| document.write, innerHTML 비추천 (0) | 2010.04.05 |