jQ 4 - append 활용 : 배열객체, 이미지를 추가하기

1. append vs appendTo 차이점

$(A)append(B) : A의 end tag 바로 앞에 B를 추가한다. 

$(B).appendTo(A) : A의 end tag 바로 앞에 B를 추가 한다. 

 

2. 배열객체를 만들어서 div태그에 값을 추가해 본다.

<div></div>
<div></div>
<div></div>

---

  $(function(){
    let content = [
      {name : '손지영', position : '영상부장'},
      {name : '조성민', position : '아이디어부장'},
      {name : '김서희', position : '디퍼부장'}
    ];
    $('div').append(function(index){
      let item = content[index];
      let output ='';
      output += '<h1>' + item.name + ' : ';
      output +=  item.position + '</h1>';
      return output;                
    });
 });

 

3. img 태그의 순서를 2초에 한번씩 변경해 본다. 

<img src="img/s1.jpg" alt="">
<img src="img/s2.jpg" alt="">
<img src="img/s3.jpg" alt="">
<img src="img/s4.jpg" alt="">
<img src="img/s5.jpg" alt="">

---

$(function(){
  $('img').css({'width':'300px','height':'200px'});
  // $('img').css('width','300px').css('height','200px');

  setInterval(() => {
    $('img').first().appendTo('body');
    }, 2000);
  });
});