태그 생성
- createElement(태그명), createTextNode(텍스트), appendChild(객체명) 메소드를 사용하여 태그 생성
window.onload = function() {
var header = document.createElement('h1'); // 태그 생성
var textNode = document.createTextNode('Hello DOM'); // 텍스트 생성
// 노드 연결
header.appendChild(textNode); // 태그에 텍스트를 추가
document.body.appendChild(header); // body태그에 추가
};
- innerHTML 프로퍼티를 사용하여 태그 생성
window.onload = function() {
// 변수 선언
var output = '';
output += '<ul>';
output += ' <li>Java</li>';
output += ' <li>HTML</li>';
output += ' <li>JavaScript</li>';
output += '</ul>';
document.body.innerHTML = output;
//document.body.textContent = output; // HTML태그를 허용하지 않고 텍스트로만 처리
};
태그 삭제
- removeChild(객체명) 메소드를 사용하여 태그 삭제
window.onload = function() {
// 문서 객체 읽기
var toRemove = document.getElementById('toRemove');
// 3초 후에 함수 호출
setTimeout(function() {
//문서 객체 제거
document.body.removeChild(toRemove);
},3000);
};
<body>
<h1 id="toRemove">Old Header</h1>
<h1>New Header</h1>
</body>
- innerHTML 프로퍼티를 사용하여 태그 삭제
document.body.innerHTML = '';
스타일 적용
- 자바스크립트에서는 식별자에 '-'를 사용할 수 없음
⭐ 스타일시트의 background-color 프로퍼티는 자바스크립트에서는 backgoundColor로 명시해야 함
window.onload = function() {
// 문서 객체 읽기
var header = document.getElementById('header');
// 스타일 적용
header.style.border = '2px solid black';
header.style.color = 'red';
header.style.backgroundColor = 'yellow';
};
<body>
<h1 id="header">Header</h1>
</body>