2023-05-25 TIL

[JS] HTML 째로 삽입하기

내가 이때가지 특정 HTML 요소를 삽입해주기 위해서 js에서 사용했던 건

createElement, setAttribute, append

요 세가지였다.

근데 하나하나 노가다로 작성하고 앉아있으니 너무 귀찮아서... 아 이거 그냥 html 통으로 삽입하는 메소드 없나? 하고 찾아봤는데

있었음.

💡 insertAdjacentHTML

어펜드 할 요소.insertAdjacentHTML("어펜드 할 방식", "html")

저 코드만 보면 뭐야? 싶을 수 있으니 예시 코드를 보자.

✅ 예시

const listBox = document.getElementsByClassName("box");

listBox[0].insertAdjacentHTML(
      "beforeend",
      `<div class="list">삽입 할 div</div>`
    );

먼저, getElement 메소드로 이미 있는 html에서 요소를 찾아오는 건 이제 익숙하다.

append랑 쓰는 방식은 비슷한데,
저 가져와서 변수를 선언해준 listBox뒤에 .insertAdjacentHTML를 붙여주고

괄호 안 왼쪽에는 넣어줄 방식,
오른쪽에는 html을 넣는다!

✅ 넣어주는 방식

참고로 넣어주는 방식에 들어갈 수 있는 건 다음과 같다.

'beforebegin': 요소 이전에 삽입
'afterbegin': 요소 내부의 첫 번째 자식 요소로 삽입
'beforeend': 요소 내부의 마지막 자식 요소로 삽입
'afterend': 요소 다음에 삽입

이렇게 하면 일일히 createElement해주고 append 해주지 않아도 훨씬! 직관적으로! 코드를 쓸 수 있다.