[JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo()

JQuery 요소 이동

원하는 위치에 어떠한 태그를 삽입해야 하는경우가 종종 있는데
오늘은 JQuery를 사용하여 위치 이동을 시켜보도록 하겠습니다.

이동시킬 요소

<img src="./images/profile.png" onerror="this.src='./images/profile2.png';" class="img" alt="profile">

위 코드에서 onerror는 src의 이미지가 오류가 났을 때, 대체해주는 태그입니다.

삽입될 요소

이동시킬 요소를 만들었으니, 이제 이동이 이뤄질 위치 태그를 만들어 줍니다.

 <div id="comment-blog-img"></div>

자바스크립트

div나 특정한 요소 안에 id를 만들고 자바스크립트를 이용해 이 div안에 방금 만든 img 태그를 넣어주기만 하면 됩니다.

$(".target").insertBefore("source");

그럼 아래와 같이 사용하면 되겠네요!

$(".img").insertBefore("#comment-blog-img");

여기서 .insertBefore은 요소의 삽입 및 이동 메서드인데 이것 말고 더 많은 메서드들이 존재합니다.

요소의 삽입 이동 태그

• insertBefore(): 요소 삽입할 곳 앞에 추가
• insertAfter() : 요소 삽입할 곳 뒤에 추가
• prependTo() : 요소를 삽입할 곳의 자식 요소 앞부분 추가
• appendTo() : 요소를 삽입할 곳의  자식 요소 끝에 추가

위 예제를 예로 들어서 보면 아래와 같은 결과를 얻을 수 있습니다.

insertBefore()

$('<a>source</a>').insertBefore('.target')

<!--insertBefore()-->
<img src="./images/profile.png" onerror="this.src='./images/profile2.png';" class="img" alt="profile">
<div id="comment-blog-img"></div>

insertAfter()

$('<a>source</a>').insertAfter('.target')

<!--insertAfter()-->
<div id="comment-blog-img"></div>
<img src="./images/profile.png" onerror="this.src='./images/profile2.png';" class="img" alt="profile">

prependTo()

$('<a>source</a>').prependTo('.target')

<!--prependTo()-->
<div id="comment-blog-img">
  <img src="./images/profile.png" onerror="this.src='./images/profile2.png';" class="img" alt="profile">
  <span>자식 요소1</span>
  <span>자식 요소2</span>
</div>

appendTo() / append()

appendTo()와 append()의 기능적인 차이는 없지만 target과 sorce의 위치가 다릅니다.

 

append()

$('.target').append('<a>source</a>')

appendTo()

$('<a>source</a>').appendTo('.target')

<!--appendTo()-->
<div id="comment-blog-img">
  <span>자식 요소1</span>
  <span>자식 요소2</span>
  <img src="./images/profile.png" onerror="this.src='./images/profile2.png';" class="img" alt="profile">
</div>

---

오늘은 이렇게 JQuery를 사용하여 위치 이동을 시키는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟