안녕하세요. 시험기간이라 글이 좀 늦었습니다ㅠㅠ
이번시간엔 제목 그대로 javascript를 이용한 HTML객체 생성을 해볼껀데요.
document객체의 createElement()를 사용하여 새로운 Element를 만들어 보겠습니다.
우선 소스를 보겠습니다.
<script type="text/javascript">
var obj=document.createElement("input");
</script>
createElement의 (와 ) 사이에 추가할 객체의 이름을 넣어주면 됩니다. 위의 코드는 input을 생성한 코드입니다.
자 객체가 생성되었습니다. 이 코드를 입력한 뒤에 실행시켜 보시면 아마 아무런 변화가 없을겁니다.
이것은 말 그대로 생성만 된 것이기 때문입니다. 정확히 말하면 생성한 뒤에 obj변수에 넣어준 것입니다.
생성은 됐지만 사용할수가 없으면 아무런 소용이 없으니 이제 화면에 보여주겠습니다.
다음줄에 아래 코드를 추가시켜 줍니다.
document.body.appendChild(obj);
다음줄에 아래 코드를 추가시켜 줍니다.
위 코드의 내용은 document의 body부분에 obj를 붙인다(append)는 뜻입니다.
appendChild에 대해서는 다음시간에 설명하겠습니다.
자 이제 생성도 했고 붙이기도 했습니다. 이제 실행하면 우리가 만든 객체가 나오는지 확인해보겠습니다.
어? 아무것도 나오지 않는군요. 뭐가 잘못된 것일까요??
이유는 바로 이벤트 입니다. 우리는 저 명령을 실행한 적이 없습니다. 단지 작성만 했을 뿐이지요 ㅋㅋ
이제 저 코드들을 함수를 사용하여 실행해 보겠습니다.
위의 코드를 수정해 보겠습니다.
<script type="text/javascript">
function createObject(){
var obj=document.createElement("input");
document.body.appendChild(obj);
}
</script>
함수를 만들었으니 이제 저 함수를 호출하는 이벤트를 발생시킬 버튼을 하나 만들겠습니다.
<input type="button" value="클릭" onclick="createObject();"/>
위 코드는 <body>와 </body>사이에 넣어줍니다.
혹시 함수의 생성 및 호출에 대해서 모르시는분은 아래 링크를 참고하시면 되겠습니다.
이제 실행시켜보시면 아래와 같은 화면이 나타날것입니다. 버튼을 클릭해보시면 객체가 생성되는것을 보실 수 있습니다. 아마 저와 실행화면이 다르게 다올겁니다 ㅋㅋ 저는 어떻게 생성하였을때 안에 값이 들어가 있는을까요? ㅋㅋ 차근차근 따라오셨다면 분명 아실꺼라 믿습니다. 힌트는 아래 첨부해놓겠습니다. ㅎㅎ
'Lecture > Javascript-기초' 카테고리의 다른 글
| php + javascript 를 이용한 html5 video 자막 삽입 (2) | 2012.06.28 |
|---|---|
| 자바스크립트를 이용한 CSS 제어 (2) | 2012.06.25 |
| [본격 게시판짜기 Part1.3 - Dom 맛보기 ] 글입력폼 검사 (39) | 2012.06.13 |
| HTML객체에서 값 가져오기 (0) | 2012.06.02 |
| 함수의 생성과 호출 (0) | 2012.05.25 |
