예제3(Element 생성하는 방법)

<html>

<head>

<title>||Working with elements||</title>

</head>

<script type="text/javascript">

var my_div = null;

var newDiv = null;

function addElement() {

// create a new div element

// and give it some content

newDiv = document.createElement("div");

<!-- 텍스트 생성 -->

newContent = document.createTextNode("Hi there and greetings!");

newDiv.appendChild(newContent);

//add the text node to the newly created div.

// add the newly created element and it's content into the DOM

my_div = document.getElementById("org_div1");

document.body.insertBefore(newDiv, my_div); <!--my_div 앞에 newDiv 넣기 -->

}

</script>

<body onload="addElement()"> <!-- 페이지 로드될 때 함수 실행 -->

<div id='org_div1'>

The text above has been created dynamically.

</div>

</body>

</html>

<html>

    <style type="text/css">

        .hide{display:none}

        #menu{

            padding-left:0;

        }

        #menu li{

            float:left;

            margin-left:20px;

        }

        #canvas{

            clear:both;

        }

    </style>

    <body>

        <ul id="menu">

            <li><a id="gogh" href="#tab1">고흐</a></li>

            <li><a id="gaudi" href="#tab2">가우디</a></li>

            <li><a id="albrecht" href="#tab3">알브레히트 뒤러</a></li>

        </ul>

        <div id="canvas">

            <div id="gogh_img">

                <img src="http://farm3.static.flickr.com/2435/3687464186_5ca34c866c.jpg" />

            </div>

            <div class="hide"  id="gaudi_img">

                <img src="http://farm2.static.flickr.com/1027/5184060937_679f620225.jpg" />

            </div>

            <div class="hide"  id="albrecht_img">

                <img src="http://farm5.static.flickr.com/4084/4979876994_5bce879910.jpg" />

            </div>

        </div>

        <script type="text/javascript">

<!-- 크로스 브라우징을 위해서...브라우져마다 이벤트 받는 객체가 다름 -->

            function addEvent(el, eType, fn, uC) {

                if (el.addEventListener) { <!-- 파폭, 크롬..-->

                    el.addEventListener(eType, fn, uC);

                    return true;

                } else if (el.attachEvent) { <!-- 익스플로러 -->

                    return el.attachEvent('on' + eType, fn);

                } else {

                    el['on' + eType] = fn;

                }

            }

            function clickHandler(e){ <!--브라우져가 이 함수로 이벤트를 받음-->

                var id = e.target.id; <!--이벤트 타겟의 아이디를 받음-->

<!--해당 id의 엘리먼트를 지칭-->

                var t = document.getElementById(e.target.id+'_img');

                var p = document.getElementById('canvas');

<!--줄바꿈을 포함한 하위엘리먼트의 숫자-->

                for(var i = 0 ; i < p.childNodes.length ; i ++){

                    var c = p.childNodes[i];

                    if(c.nodeName == 'DIV'){ <!--DIV 태그라면 class=hide -->

                        c.setAttribute('class', 'hide');

                    }

                }

                t.setAttribute('class', ''); <!-- 클릭했던 타겟만 hide 안 함-->

            }

            addEvent(document.getElementById('gogh'), 'click', clickHandler)

            addEvent(document.getElementById('gaudi'), 'click', clickHandler)

            addEvent(document.getElementById('albrecht'), 'click', clickHandler)

        </script>

    </body>

</html>