Javascript DOM 추가, 제거 (공부_3)

이번 시간에는 DOM을 추가하는 방법과 제거하는 방법에 대해서 공부하고 내용을 정리할 예정이다.

 

 

DOM 추가

• createElement : 생성하고 싶은 tagName의 HTML 요소를 입력하면 새로 생성됨

let li = document.createElement('li');

 

• appendChild : 특정 부모 노드의 마지막 자식으로 새로운 노드를 추가
  ---> 처음에 부모 노드를 가져오고 부모 노드에 추가하고 싶은 자식 노드 추가

let li = document.createElement('li');
let ul = document.querySelector('ul');
li.textContent = 'Hello';
ul.appendChild(li);

 

• insertBefor : 삽입할 요소의 위치를 정해서 새로운 노드 삽입
  ---> 첫 번째 매개변수는 삽입할 요소, 두 번째 매개변수는 삽입할 위치를 정하는 요소

let li = document.createElement('li');
let ul = document.querySelector('ul');
li.textContent = 'Hello';
let targetLi = document.querySelector('li#target'); // id가 target인 li 가져오기
ul.insertBefore(li, targetLi);	// targetLi 요소 앞에 li 삽입

 

 

버튼을 클릭해서 새로운 요소를 추가하는 코드 예시)

let addBtn = document.getElementById('button');
let inputBox = document.querySelector('input');

addBtn.addEventListener('click', function () {
  let li = document.createElement('li');
  let ul = document.querySelector('ul');
  li.textContent = 'Hello';
  ul.appendChild(li);
});

---> 1. ID가 button인 요소를 가져와서 addBtn 변수에 저장

       2. 버튼이 클릭 되면 새로운 요소를 추가해야하므로 클릭 이벤트 리스너를 추가

       3. 'click', function ()를 매개변수로 쓰기

       4. 이후 새로운 요소 추가하는 코드 작성

 

 

DOM 삭제

• remove : 해당 요소 제거

let targetLi = document.querySelector('li#target');
targetLi.remove();

---> li에서 id가 target인 요소를 targetLi에 저장 후 remove를 사용해 해당 요소 제거

 

• parentNode : 부모 노드 반환

let removeBtn = document.querySelector('.remove-btn');
removeBtn.addEventListener('click', function (event) {
  // event : 현재 click 이벤트에 대한 정보
  // console.log(event);
  // console.log(event.target); ---> 현재 클릭한 요소에 접근 할 수 있음
  // console.log(event.target.parentNode); // parentNode : 부모노드에 접근할 수 있음
  event.target.parentNode.remove();
});

 

 

 

 

추가로 학습한 내용

• input 박스 안에 내용을 적고 추가할 때 추가하고 나서 다시 내용을 지우고 작성해야 하는 번거로움이 생김
  이를 해결하는 방법은 아래와 같다.

let inputBox = document.querySelector('input');
inputBox.value = '';

• input 박스 안에 내용을 적고 추가를 하면 다시 마우스로 input 박스를 누른 후 입력해야 한다.
  이를 해결하고자 추가한 후 초점이 자동으로 input 박스로 가도록 하는 방법은 아래와 같다.

inputBox.focus();

 

 

 

정리

• document.createElement로 HTML 요소들을 생성할 수 있음
• 생성한 요소를 appendChild로 추가를 할 수 있음
• insertBefore로 특정 요소 앞에 추가할 수 있음
• remove를 통해서 요소를 제거할 수 있음
• parentNode로 부모 노드를 반환할 수 있음

 

 

 

느낀점

이번에 HTML 요소를 생성하고 삭제하는 방법을 배웠는데 이전에 배웠던 내용들과 매우 유사해서 크게 어려움은 없었다. 이벤트 리스너도 학교에서 자바 프로그래밍을 배울 때 이미 익숙해진 개념이라 어려움 없이 따라갈 수 있었다. 그런데 아직 익숙하지 않아서 반복학습을 통해 하루라도 빨리 능숙하게 다룰 수 있으면 좋을 거 같다.