[jQuery] – append(), appendTo(), html(), prepend(), prependTo(), text() , after() , before()

append() - 지정한 요소의 마지막에 내용를 추가

appendTo() - 지정한 요소의 마지막에 내용를 추가

# append()와 appendTo()는 동일한 기능을 수행하지만, 추가될 내용과 타겟의 위치가 다름.

A.append(B) - A에 B를 추가

A.appendTo(B) – B에 A를 추가

 

html(value) - 지정한 요소 내부에 새로운 html문자열(value)을 추가

 

prepend() – 지정한 요소의 시작 부분에 내용을 삽입

prependTo() – 지정한 요소의 시작 부분에 내용을 삽입

# prepend ()와 prependTo()는 동일한 기능을 수행하지만, 추가될 내용와 타겟의 위치가 다름.

A.prepend(B) - A에 B를 추가

A.prependTo(B) – B에 A를 추가

 

text(value) – 지정한 요소에 내부에 새로운 text문자열(value)을 추가

 

비슷하지만 다른 메소드 입니다.

태그의 내부와 외부에 값이 들어가는 차이가 있고 앞부분과 뒷부분에 들어가는 차이가 있습니다.

 

◎ append() - 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입
◎ prepend() - 콘텐츠를 선택한 요소 내부의 시작 부분에서 삽입
◎ after() - 선택한 요소 뒤에 컨텐츠 삽입
◎ before() - 선택된 요소 앞에 컨텐츠 삽입

 

간단하게 예를 들어보면

 

<p>  중앙  </p>  이렇게 태그가 있을경우

 

append() 는    <p>  중앙  여기에 값이들어감</p>

prepend() 는   <p>여기에 값이들어감  중앙  </p>

after() 는        <p>  중앙  </p>여기에 값이들어감

before() 는      여기에 값이들어감<p>  중앙  </p> 

 

중앙 이라는 글자 대신 다른 태그가 들어가 있다면 결과물의 배치가 달라지겠죠...^^

--------------------------------------

[출처] 자바스크립트 - append, prepend, after, before - 추가|작성자 산들바람