16강. 웹 페이지를 동적으로 만들기
15강. 버튼 만들기14강. HTML요소 클릭시 동작하도록 만들기.13강. 자바스크립트 함수 사용법함수란 자바스크립트 블록문을 하나의 어떤 액션(특정작업)을 할 수 있도록 만든 것이다.함수의 구조는
soo0100.tistory.com
동적으로 HTML신규 요소(Element) 를 추가한다.
이 동작을 하기위해서는 DOM의 createElement() 와 appendChild() 함수를 사용해야 한다.
예제를 만들어보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM을 활용하여 신규 요소 추가하기</title>
<script>
function addItem(){
var newItem = document.createElement("p");
newItem.innerText="새 요소";
var area = document.getElementById("textArea");
area.appendChild(newItem);
}
</script>
</head>
<body>
<input type="button" value="추가" onclick ="addItem();">
<div id="textArea">
<p>이곳에 신규 요소가 생성됨</p>
</div>
</body>
</html>
1. body 에서 버튼 과 신규요소가 생성될 div 영역을 만들었다.
신규 요소는 p 이다.
2. 버튼을 클릭하면 addItem() 함수가 실행될수 있도록 버튼 속성에 onclick 을 정의한다.
3. addItem() 함수에서는 하기와 같은 일을 한다.
3-1. document.createElement() : 새로 추가할 요소를 만든다.
예제에서는 p 요소를 만들기위해 인수로 p 를 넘긴다.
3-2. document.getElementById() : id로 요소를 찾는다.
찾은 요소 밑에 신규로 만든 p 요소를 추가 할 것이다.
3-3. area.appendChild(); 자식 요소를 추가한다.
area 라는 div 요소 밑에 p 요소를 추가하고 있따.
버튼을 누를때마다 신규요소(p) 가 추가됨을 확인 할수 있다.
신규요소를 만들때는 document.createElement()
자식요소를 추가할때는 appendChild()
함수를 이용함을 기억하자.
'앱 만들기 > JavaScript study' 카테고리의 다른 글
| 로또 번호 자동 생성하기 (2) | 2024.08.15 |
|---|---|
| 로또 숫자 만들기 with 자바스크립트 (랜덤 함수 활용하기) (3) | 2024.08.12 |
| 16강. 웹 페이지를 동적으로 만들기 (1) | 2024.08.03 |
| 15강-2. 버튼 만들기 (함수 이용) (1) | 2024.07.30 |
| 15강. 버튼 만들기 (2) | 2024.07.23 |
댓글