<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "Http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Modifying Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />
<script type="text/javascript">
//<!-[CDATA [
document.onclick=changeDoc;
function changeDoc() {
// 헤더를 제거한다.
var hdr = document.getElementById("hdr1");
var div = document.getElementById("div1");
div.removeChild(hdr);
// 이미지를 텍스트로 대체한다.
var img = document.getElementById("img1");
var p = document.getElementById("p2");
var txt = document.createTextNode("New text node");
p.replaceChild(txt, img);
// 새 엘리먼트를 추가한다.
var div2 = document.createElement("div");
div2.innerHTML = "<h1>The End</h1>";
document.body.appendChild(div2);
}
//]]>
</script>
</head>
<body>
<div id="div1">
<h1 id="hdr1">Header</h1>
<!-- paragraph one -->
<p id="p1">To better understand the document tree, consider a web
page that has a head and body section, has a page title, and
contains a DIV element that itself contains an H1 header and to paragraphs.
One of the paragraphs contains <i>italicized text</i>; the other has an
image--not an uncommon web page.</p>
</div>
<!-- paragraph two -->
<p id="p2">Second paragraph with image. <img id="img1" src="dotty.gif" alt="dotty" /></p>
</body>
</html>