[JavaScript] 요소 추가하는 함수 append, prepend

목표

append, appendTo, prepend, prependTo 함수에 대해 알아보자.

 

함수

1) append(), appendTo() : 원하는 요소를 '맨 뒤' 에 추가하는 함수.

2) prepend(), prependTo() : 원하는 요소를 '맨 앞' 에 추가하는 함수.

 

학습

1) HTML 마크업

  <div>
      <ul>
        <li>안녕하세요.</li>
        <li>배가고파요.</li>
      </ul>
  </div>

2) JacaScript

A, B 의 위치를 정확하게 파악할것.

        $(function(){
            console.log('연결성공!')
            //A = 새로 추가할 내용
            //B = A가 추가될 요소(태그)

            //append = B의 맨 마지막에 추가됨.
            //appendTo
            //A.appendTo(B)
            $('<li>이건 뒤에 추가되는 append() </li>').appendTo('div > ul')

            //append
            //B.append(A)
            $('div > ul').append('<li>appendTo 와 append</li>')

            //prepend = B의 맨 앞에 추가됨.
            //prependTo
            //A.prependTo(B)
            $('<li>이건 앞에 추가되는 prepend() </li>').prependTo('div > ul');
            
            //prepend
            //B.prepend(A)
            $('div > ul').prepend('<li>prependTo 와 prepend</li>');
        })

결과