HTML body부분에 직접 쓰지 않아도 자바스크립트를 활용하면 프로그램 적으로 필요한 요소들을 추가할 수 있다.
document.createElement()는 문서 안에 괄호 안에 있는 요소를 만든다는 의미를 가진다. 시각적인 효과를 위해 공간을 만들고 거기에 클로버를 집어 넣고 약간 꾸미는 작업을 진행한다.
document.createTextNode() 는 먼저 h1을 요소로 불러낸 뒤에 출력하고 싶은 내용을 입력했다.
<script>
var span;
var h;
var txt;
function init(){
span=document.createElement("span");
span.innerHTML="♣";
span.style.fontSize=50 + "pt";
span.style.position="absolute";
span.style.left=100+"px";
span.style.top=50+"px";
span.style.color="red";
document.body.appendChild(span);
h = document.createElement("H1");
txt = document.createTextNode("문돌이의IT");
h.appendChild(txt);
document.body.appendChild(h);
}
</script>
<body onLoad="init()">
</body>
Body에 작성하면 순식간에 처리가 가능하지만 자바스크립트로 생성하기 위해서는 약간의 암기와 적용이 필요하다.
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| [문돌이의IT] 자바스크립트 반복문을 파헤치자(for문) (0) | 2016.01.23 |
|---|---|
| [문돌이의IT] 자바스크립트 변수의 개념을 알아보자 (0) | 2016.01.23 |
| [문돌이의IT] 자바스크립트 id, name 속성의 차이점 (0) | 2016.01.20 |
| [문돌이의IT] 자바스크립트 Math객체로 랜덤효과 나타내기 (0) | 2016.01.19 |
| [문돌이의IT] 자바스크립트 Math객체 활용하기(Math.random(), Math.floor() 매서드) (0) | 2016.01.18 |