<html>
<head>
<script type="text/javascript">
window.onload = function(){
// 동적으로 문서 객체 표시1
var header = document.createElement('h1');
var textNode = document.createTextNode('Hello DOM');
header.appendChild(textNode);
document.body.appendChild(header);
// 동적으로 문서 객체 표시2
var img = document.createElement('img');
img.src = 'aaa.jpg';
img.width = 500;
img.height = 350;
img.setAttribute('data-property', 350);
document.body.appendChild(img);
// 동적으로 문서 객체 표시3
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>jQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>';
document.body.innerHTML += output;
// 문서 객체 가져와서 바꾸기 (ID 사용)
var header1 = document.getElementById('header-1');
header1.innerHTML = 'with getElementById();';
// 문서 객체 가져와서 바꾸기 (TagName 사용)
var headers = document.getElementsByTagName('h1'); // 배열로 가져옴
for ( var i=0; i < headers.length ; i++ )
{
headers[i].innerHTML = 'with getElementsByTagName()';
}
};
</script>
</head>
<body>
<h1 id='header-1'>Header 1 !!</h1>
<h1>Header 2 !!</h1>
</body>
</html>
'jQuery 등 스크립트 ' 카테고리의 다른 글
| JavaScript 디스플레이하는 4가지 방법 (0) | 2015.05.08 |
|---|---|
| 윈도우 타이머, 랜덤. 클로저 활용, 메모리 효율적 (0) | 2015.05.06 |
| jQuery 다운로드 및 도움말 다운로드 (0) | 2015.04.29 |
| Cordova (폰갭) backkey 막기 (0) | 2015.04.14 |
| jQuery 공부하기 좋은 곳 (0) | 2015.03.24 |