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

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

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

 

// HTML

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

 

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

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

 

 

append()

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

 

 

prepend()

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

 

 

appendTo()

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

 

 

// js

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

 

 

prependTo()

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

 

 

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

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

 

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

 

before()

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

 

 

after()

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

 

 

자 모두 보니 잘 아시겠죠?

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