[jQuery] 추가 및 삭제 | append remove before after text html

기초리스트

▶기초 ( 선언하기 $.ready() )
▶ 속성보기 ( attr val checked disabled )
▶ 추가 및 삭제 ( append remove before after text html )
▶ 부모형제요소 찾기 ( parent closest children find prev next filter )
▶ 스타일 변경하기 ( css show hide toggle addClass toggleClass )

---

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

append, prepend

// 선택자의 마자막에 추가
$('ul').append('<li> 리스트 마지막 </li>');

// 선택자의 첫번째에 추가
$('ul').prepend('<li> 리스트 맨처음 </li>');

// 선택자를 타겟 마지막에 추가
$('<li> 리스트 진짜 마지막 </li>').appendTo('ul');

// 선택자를 타겟 첫번째에 추가
$('<li> 리스트 진짜 맨처음 </li>').prependTo('ul');

위 코드대로 입력하면 아래와 같이 추가된다

<!--HTML / after script-->

<ul>
    <li> 리스트 진짜 맨처음 </li>
    <li> 리스트 맨처음 </li>
    <li> 리스트 마지막 </li>
    <li> 리스트 진짜 마지막 </li>
</ul>

before, after

// 선택자의 바로 앞에
$('ul').before('<p> 리스트 앞 </p>');

// 선택자의 바로 뒤에
$('ul').after('<p> 리스트 뒤 </p>');

// 선택자를 타겟 앞에 추가 ??
$('li[name=first]').insertBefore('ul');

// 선택자를 타겟 뒤에 추가 ??
$('li[name=last]').inserAfter('ul');

<!--HTML / after script-->

<p> 리스트 앞 </p>
<ul>
    <li name=first></li>
    <li name=last></li>
</ul>
<p> 리스트 뒤 </p>

text, html

// 텍스트 받아오기
$('h1').text();

// 텍스트 지정하기
$('h1').text('Hello World!');

// HTML 지정하기
$('h1').html('<b>Hello World!</b>');

삭제

// dom에서 삭제 (jquery 데이터나 이벤트도 모두 삭제)
$('div').remove();

// div중 id가 1, 2인 것을 삭제
$('div').remove('#1, #2');

// dom에서 삭제 (jquery 데이터나 이벤트도 모두 유지)
$('div').detach();

// 선택자 내부요소 삭제
$('div #3').empty();

// 선택자 부모요소 삭제
$('div #3').unwrap();

<!-- HTML / before script-->

<frame>  
    <div id=1></div>  
    <div id=2></div>
    <div id=3>
        <span> 내부요소 </span>
    </div>
</frame>

<!--HTML / after script -->

<div id=3>	</div>

---