[Js] insertAdjacentHTML 데이터의 망가짐 없이 데이터 추가하기

innerHTML을 하면 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정을 한다고 합니다. 그리고 MDN문서에 의하면,

요소 element의 내용을 변경하는 대신에  HTML을 문서에 삽입하려면, inserAdjancentHTML을 사용하라고 한다네요.

inserAdjancentHTML (adjancent : 인접한)

HTML or XML 특정 텍스트를 파싱 하고, 특정 위치 DOM tree 안에 원하는  node들을 추가하고 이미 사용 중인 element는 다시 파싱하지 않아 건드리지 않는다고 하네요.

 

사용법 

(1)----  내가 넣고 싶은 위치를 특정 짓는다(id 또는 class 등을 이용 )

(2)----  (1).insertAdjancentHTML(4개의 위치 중 택 1, 넣길 원하는 요소)

document.getElementById("넣길 원하는 위치 id").insertAdjancentHTML('beforeend', 추가할 요소)
//풀어서
let 1번 = document.getElementById("넣길 원하는 위치 id")
1번.insertAdjancentHTML(4개의 위치 중 택 1, 추가할 요소)

4개의 위치, afterbegin, afterend, beforebegin, beforeend

let test_form = document.getElementById('test')
let template = `<span>안녕</span>` //백틱 사용 잊지 않기
test_form.inserAdjacentHTML('beforeend', template)

출처.

https://stackoverflow.com/questions/8912302/javascript-deleting-form-input-adding-to-innerhtml/8912322#8912322

Javascript deleting form input adding to innerHTML

https://chanto11.tistory.com/51

insertAdjacentHTML 과 innerHTML 차이 알아보기