자바스크립트 beforebegin, afterbegin, afterend, beforeend

Q. 자바스크립트에서, beforeend, beforebegin, afterbegin, beforebegin은 이미 정해져있는 위치인거야?

 

A.

네, 맞습니다. 자바스크립트에서 beforeend, beforebegin, afterbegin, afterend는 이미 정해져 있는 위치를 나타내는 상수 값입니다. 주로 insertAdjacentHTML이나 insertAdjacentElement 같은 메서드에서 새로운 HTML 요소나 텍스트를 특정 위치에 삽입할 때 사용됩니다.

각 상수가 나타내는 위치는 다음과 같습니다:

• beforebegin: 해당 요소의 바로 앞
• afterbegin: 해당 요소의 시작 태그 바로 뒤 (첫 번째 자식 요소 앞)
• beforeend: 해당 요소의 종료 태그 바로 앞 (마지막 자식 요소 뒤)
• afterend: 해당 요소의 바로 뒤

HTML

<div id="myDiv">기존 내용</div>

JavaScript

const myDiv = document.getElementById('myDiv');

myDiv.insertAdjacentHTML('beforebegin', '<p>새로운 단락 (beforebegin)</p>');
myDiv.insertAdjacentHTML('afterbegin', '<p>새로운 단락 (afterbegin)</p>');
myDiv.insertAdjacentHTML('beforeend', '<p>새로운 단락 (beforeend)</p>');
myDiv.insertAdjacentHTML('afterend', '<p>새로운 단락 (afterend)</p>');

 

결과:

HTML

<p>새로운 단락 (beforebegin)</p>
<div id="myDiv">
  <p>새로운 단락 (afterbegin)</p>
  기존 내용
  <p>새로운 단락 (beforeend)</p>
</div>
<p>새로운 단락 (afterend)</p>

 

참고.

 

insertAdjacentHTML 외에도 insertAdjacentElement나 insertAdjacentText 같은 메서드에서도

동일한 위치 상수를 사용할 수 있습니다.