태그 내부에 컨텐츠 추가하기 append(), prepend(), appendTo(), prependTo(), before(), after()

우리는 때때로 동적으로 컨텐츠를 조작하기도 합니다.

어떠한 컨텐츠를 넣고 싶다는 예제로 알아보도록하겠습니다.

 

// HTML

<div id="hi">
  <p>안녕하시렵니까?</p>
</div>

 

이럴때 사용하는 메서드는 append(), prepend(), appendTo(), prependTo(), after(), before()가 있습니다.

하나하나 알아보겠습니다.

 

 

append()

- 선택된 요소에 포함되며 마지막 위치에 새로운 요소로 추가된다.

 

See the Pen LYPwWyX by leeyoonseo (@okayoon) on CodePen.

 

prepend()

- 선택된 요소에 포함되며 첫번째 위치에 새로운 요소로 추가된다.

 

See the Pen XWrvMeE by leeyoonseo (@okayoon) on CodePen.

 

appendTo()

- append와 같은 결과 값이나 선택자와 추가하는 요소의 위치가 바뀐다.

 

See the Pen appendTo by leeyoonseo (@okayoon) on CodePen.

 

// js

(추가할 요소).appendTo(타겟);

 

 

prependTo()

- prepend와 같은 결과 값이나 선택자와 추가하는 요소의 위치가 바뀐다.

 

See the Pen prependTo by leeyoonseo (@okayoon) on CodePen.

 

자, 예제를 보니 append()와 appendTo()가 같은 결과이고 prepend()와 prependTo()가 같은 결과인 것을 확인했습니다.

다른 점은 선택자와 추가하는 요소의 위치가 뒤바뀌는 부분인 것이죠.

 

이제 위치가 좀 달라지는 after(), before()를 알아보겠습니다.

 

before()

- 선택된 요소에 포함되지 않으며 선택된 요소의 바로 앞에 요소가 추가된다.

 

See the Pen before by leeyoonseo (@okayoon) on CodePen.

 

after()

- 선택된 요소에 포함되지 않으며 선택된 요소의 바로 뒤에 요소가 추가된다.

 

See the Pen after by leeyoonseo (@okayoon) on CodePen.

 

자 모두 보니 잘 아시겠죠?

내가 추가하고 싶은 요소의 위치가 어떻게 되는지 확인하고 메서드를 골라 사용하면 될 것 같습니다.