[자바스크립트] CreateElement, appendChild 사용법

개발 노트/Javascript  2012.09.12 10:49



 

안녕하세요 개발자 명월입니다.

 

요번 포스팅에 소개할 Javascript는 createElement와 appendChild 입니다. 이 두가지면 js만으로 웹페이지를 만들 수 있습니다.

예를 들면 애드센스와 같이 script 뿐만 있을 뿐인데 광고를 긁어오는 방식과 비슷하다고 볼 수 있습니다.

 

TEST.html

 

  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2 <HTML>
  3  <HEAD>
  4   <TITLE> TEST Document </TITLE>
  5 </HEAD>
  6 <BODY>
  7 <script src="DomCreate.js"></script>
  8 </BODY>
  9 </HTML>

 

DomCreate.js

 

  1 var div = document.createElement('div');
  2 div.id = "abcd";
  3 document.body.appendChild(div);
  4 document.getElementById("abcd").innerHTML="명월의 자바스크립트 예제입니다.";
  5 

 

결과 화면입니다.


 예제와 보시다 시피 태그단에는 js 링크 뺴곤 없는데 결과 화면에는 글씨가 쓰였습니다.

 

소스 파일

 

jscript.zip

 

※ 이걸 응용하면 Tistory 위젯도 개발 할 수 있겠죠??


댓글 2개가 달렸습니다.
댓글쓰기

  1. 2015.06.22 13:54 |  수정/삭제  댓글쓰기

    비밀댓글입니다

    • 明月 v명월v
      2015.06.24 20:56 신고 |  수정/삭제

      안녕하세요.. 답변이 늦었네요...
      먼저 블로그 방문에 감사합니다...
      글쎄요 저도 책으로 공부한게 아니라서 어떤 책이 좋을 지는 모르겠네요..
      요즘에는 javascript보다는 javascript 라이브러리인 jquery가 대세입니다.
      포럼은 http://jquery.com/ 입니다..