TIL 23.03.11.

insertAdjacentHTML 란 무엇일까 ?

기본적으로 innerHTML과 유사하다. 대신 특정 엘리먼트를 찾아넣는 방식은 같지만, 아래의 키워드를 이용해 좀 더 구체적으로 삽입이 가능하다.

beforebegin : element 앞

afterbegin : element 안에 가장 첫번째 child

beforeend : element 안에 가장 마지막 child

afterend : element 뒤

예시

export const footer = () => {
  const body = document.querySelector(".body");

  window.addEventListener("load", () => {
    body.insertAdjacentHTML(
      "beforeend",
      `
      <footer class="footer">
      <address class="address_left">
      <ul class="addressLink">
        <li>
          <a href="#">개인정보 취급방침</a>
        </li>
        <li>
          <a href="#">이용약관</a>
        </li>
      </ul>
  
    </address>
    <address class="address_right">
      <p>
        <strong style="font-size: 20px; font-weight: 600">
          고객센터 1588-0000
        </strong>
      </p>
      <p>
        운영시간 평일 11:00 - 18:00 (토∙일, 공휴일 휴무)
        <br />
        점심시간 평일 13:00 - 14:00
        <br />
        1:1 문의하기는 앱에서만 가능합니다.
      </p>
    </address>
      </footer>
    
    `
    );
  });
};