jQuery append(), appendTo(), prepend(), prependTo(), text(), html()

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

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

 

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

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

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

 

prepend() – 지정한 요소의 시작 부분에 내용 추가
prependTo() – 지정한 요소의 시작 부분에 내용 추가

 

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

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

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

 

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

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

$('#appendBtn').click(function(){
  $('#target').append($('#source'));
});

$('#appendToBtn').click(function(){
  $('#source').appendTo($('#target')); //append와 타겟,소스위치가 다름
});

$('#htmlBtn').click(function(){
  $('#target').html($('#source'));
});

$('#prependBtn').click(function(){
  $('#target').prepend($('#source')); //prepend와 타겟,소스 위치가 다름
});

$('#prependToBtn').click(function(){
  $('#source').prependTo($('#target'));
});

$('#textBtn').click(function(){
  $('#target').text('이것은임의의 텍스트 문자열 입니다.');
});