[JavaScript]원하는 위치에 HTML코드를 넣는 방법

 

 

안녕하세요 무택입니다 :)

오늘은 자바스크립트로 HTML 내에 코드를 어떻게 넣을 수 있는지 알아보겠습니다. 필요에 따라 HTML 내에 하드코딩식으로 넣을 수도 있지만 하나의 방법으로 자바스크립트로 어떻게 넣는지 알아보겠습니다🤔

 

 

왜 JS를 이용해서 넣을까?

단순히 한 부분에 간단한 코드를 넣는다고 하면 하드코딩으로 직접 HTML 코드를 넣으면 편합니다.

 

하지만 넣어야 하는 코드가 `input_text`라는 클래스를 가진 요소 앞에 모두 넣으려고 한다면 하드코딩으로 하기 힘듭니다. 그렇기 때문에 JS를 활용하면 특정 클래스나 아이디 등의 관련된 위치에 넣을 수 있는 편의성이 있습니다.

 

 

HTML/CSS

<style>
    * {text-align: center; font-size: 13px;}
    body {width: 300px;}
    span {margin: 4px 0 4px 0; display: inline-block;}
    .post {width: 300px; height: 200px; background: #3333ff;}
    .post p {line-height: 120px; font-size: 16px;}
    .post * {color: #fff}
</style>

<!-- beforebegin의 위치 -->
<div class="post"> <!--기준-->
<!--   afterbegin의 위치 -->
  <p><strong>post</strong></p>
<!-- beforeend의 위치 -->
</div>
<!-- beforeend의 위치 -->

 

 

JS

window.addEventListener('load', function () {
  let parent = document.querySelector(".post");
  
  parent.insertAdjacentHTML('beforebegin', "<span>beforebegin의 위치</span>");
  parent.insertAdjacentHTML('afterbegin', "<span>afterbegin의 위치</span>");
  parent.insertAdjacentHTML('beforeend', "<span>beforeend의 위치</span>");
  parent.insertAdjacentHTML('afterend', "<span>afterend의 위치</span>");
});

 

 

Codepen

See the Pen [JS]HTML내부에 코드 넣기(위치별) by TytanLee (@TytanLee) on CodePen.

 

 

 

 

코드 설명

window.addEventListener('load', function () {
	기준요소.insertAdjacentHTML('위치', "넣을 코드 내용");
})

사용하는 방법은 위와 같습니다. 기준요소를 잡고 `insertAdjacentHTML`을 이용해서 괄호 안에는 넣을 위치, 코드 내용을 작성해 줍니다.

 

위치를 가리키는 코드

- beforebegin : 부모가 시작하기 전

- afterbegin : 부모가 시작한 후

- beforeend : 부모가 끝나기 전

- aftereend : 부모가 끝난 후

 

위 네가지를 이용하면 어떤 위치든 코드를 넣을 수 있습니다.

 

만약 넣을 코드 내용이 한 줄을 넘어간다면 아래처럼 백틱 기호(~표시 키)를 사용하면 여러 줄의 코드를 넣을 수 있습니다.

window.addEventListener('load', function () {
	기준요소.insertAdjacentHTML('위치',`
    <div>
    	<span>JS로 HTML 삽입하기</span>
    </div>
    `);
})