TIL 12 | 바닐라 자바스크립트로 HTML 요소 추가하기

이사감·2021년 2월 9일

JavaScript TIL

Javascript

목록 보기

1/9

TIL 12

바닐라 자바스크립트로 HTML 요소 추가하기

혼자 조금씩 코딩하고 있는 미니 프로젝트에 유튜브 영상들을 보여주는 메뉴가 있다. 그 페이지를 구현하기 위해 HTML에서 하나하나 영상 태그를 입력하는 것이 귀찮았다.

그래서 바닐라 자바스크립트로 영상의 정보를 모은 객체를 만들고 그 객체를 모아놓은 배열을 만들었다. 그리고 반복문으로 그 배열을 이용하여 html에 영상 태그를 입력하게끔 만들었다. ~~원랜 DB로 하는거 같은데, 나는 지금 당장 하고 싶은데 아는게 array/object밖에 없어서 그랬따ㅏ...~~

배열에 영상 주소를 추가하는 것만으로 자동으로 영상 태그가 추가되게 만들고 싶었기 때문이다.

이 글에서는 반복문으로 실행되는 로직 중, HTML에 동영상 요소 태그를 추가하는 부분에 대해 정리해본다.

코드

//videoTag 변수의 의미
//추가하고싶은 HTML태그를 다른 함수를 통해 videoTag 변수에 할당해둔 상태입니다.

function appendVideo(videoTag) {
    // 1. DOM 객체 생성
    let div = document.createElement('div');
    
    // 2. innerHTML를 이용하여 div 태그에 HTML 태그를 작성
    div.innerHTML = videoTag;
    
    // 3. div를 원하는 위치에 삽입
    videoBox.appendChild(div);
}

1. DOM 객체 생성

우선 video tag가 들어갈 새로운 DOM 객체를 생성한다.

Document.createElement(tagName)

지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환합니다.

2. div 안에 새로 추가할 HTML 태그 덮어쓰기

그리고 그 안에 미리 작성해둔 video tag를 넣는다.

Element.innerHtml

요소 내에 포함된 HTML 또는 XML마크업을 가져오거나 설정한다. 페이지가 처음 로드된 이후의 모든 변경 사항을 포함하여, 페이지의 현재 소스를 검사하는데 사용할 수 있다.

innerText처럼 텍스트만을 다루는 것이 아니라 HTML의 구조를 다룬다. 단순 텍스트 콘텐츠 추가가 아닌 video tag를 작성해야 하므로 innerHTML이 적절하다.

innerHTML을 사용할 때에는 가급적 한번만 호출, 사용하는 것이 성능에 좋다 (노드간의 파싱 과정이 필요하므로)

여기서 주의할 점은, innerHTML을 활용하면 기존 노드를 삭제 후 재구성한다는 것이다. 이 말은 기존 내용을 삭제하고 새로운 내용을 넣는 덮어쓰기의 형태를 띈다는 것이다.

만일 덮어쓰기를 하기 싫다면, insertAdjacentHTML을 활용할 수 있다.

insertAdjacentHTML(position, text)

position

시작태그 앞/뒤 : beforebegin, afterbegin

닫는태그 앞/뒤 : beforeend, afterend
단, beforebegin, afterend position은 element의 부모가 존재해야 하고, node가 tree 안에 있어야 한다.

HTML의 인접 요소에 삽입하기. 즉 태그의 앞, 뒤에 삽입할 수 있다. innerHTML과 달리 기존 노드를 건드리지 않고 position으로 지정한 곳에 노드를 추가한다.