JQuery, 요소 추가(append)

Append

 

A.append(B) -> A에 B를 추가한다.
B.appendTo(A) -> B를 A에 추가한다.

항상 뒤에 추가된다.

---

예시

let i=1;
		
$('input:eq(0)').click(function(){
	let li1 = $('<li>').css('color', 'red').html('추가 항목' + (i++));
	let li2 = $('<li>').css('color', 'red').html('추가 항목' + (i++));
	let li3 = $('<li>').css('color', 'red').html('추가 항목' + (i++));

	// li 추가
	$('ul').append(li1);
	$('ul').append(li2);
	$(li3).appendTo('ul');
});

$('input:eq(1)').click(function(){
	// 전부 삭제
	$('ul').empty();
})

 

 

$('input:eq(0)').click(function(){

input 요소들 중 첫번째 input을 클릭하면

 

let li1 = $('<li>').css('color', 'red').html('추가 항목' + (i++));

글자색이 빨간색인 <li>추가항목 (i++)</li>이

 

$('ul').append(li1);

ul에 맨 뒤에 추가된다.

 

$('input:eq(1)').click(function(){

input 요소들 중 두번째 input을 클릭하면

 

$('ul').empty();

전부 삭제한다.

ul태그만 삭제한거지 i를 초기화 한게 아니라 계속 증가된 값으로 나온다.