문서에 객체, 속성값 설정
2021. 11. 22. 20:05ㆍStudy/JavaScript
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>
<script>
function add(){
var header = document.createElement('h3'); // 요소 노드 생성
var textNode = document.createTextNode('내 이름은 홍길동입니다.'); // 텍스트 노드 생성
header.appendChild(textNode); // 요소 노드와 텍스트 노드 연결
document.body.appendChild(header); // 생성한 문서 객체를 body에 추가
}
function imgadd(){
var img = document.createElement('img');
img.src='html5.jpg';
img.width=100;
img.setAttribute('height', 122);
img.setAttribute('border', 4);
document.body.appendChild(img);
}
</script>
</head>
<body>
<a href="#" onclick="add()">당신의 이름은 무엇입니까?</a>
<a href="#" onclick="imgadd()">이미지 추가</a>
</body>
</html>
createElement();
createTextNode();
appendChild();
setAttribute();
'Study > JavaScript' 카테고리의 다른 글
| JavaScript - 1. 개요와 역사 (0) | 2021.11.24 |
|---|---|
| 문서 객체 스타일 변경하기 (0) | 2021.11.22 |
| 객체 Object (0) | 2021.11.02 |
| 함수 Function (0) | 2021.11.02 |
| 제어문 (0) | 2021.11.01 |
