[jQuery] 요소 삽입/이동 - insertBefore(), insertAfter(), prependTo(), appendTo()
Front-End/jQuery 2017. 1. 4. 16:46
요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo()
1. insertBefore(), insertAfter(), prependTo(), appendTo()
1) 기본 형태
- $('삽입요소').method('삽입셀렉터')
- '<' 로 시작하고 '>'로 끝나야한다
- <br/>은 안됨
2) 메소드
- insertBefore(): 요소 삽입할 곳 앞에 추가
- insertAfter() : 요소 삽입할 곳 뒤에 추가
- prependTo() : 요소를 삽입할 곳의 자식요소 앞부분추가
- appendTo() : 요소를 삽입할 곳의 자식요소 끝에 추가
3) 예제
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> .shirt{ color:red; } </style></head><ul id="list"> <li class="shirt">shirt</li></ul><script> $(function(){ $('<li>jacket</li>').prependTo('#list'); $('<li>pants</li>').appendTo('#list'); $('<p>hat</p>').insertBefore('#list'); $('<p>shoes</p>').insertAfter('#list'); });</script>
2. before(), after(), prepend(), append()
1) 기본형태
- $('삽입 셀렉터').method('삽입 요소')
- 위의 함수와 비슷하지만 위치만 바뀌게 된다
2) 예제
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> .shirt{ color:red; } </style></head><ul id="list"> <li class="shirt">shirt</li></ul><script> $(function(){ $('#list').before('<p>hat</p>'); $('#list').after('<p>shoes</p>'); $('#list').prepend('<li>jacket'); $('#list').append('<li>pants</li>'); });</script>
- 결과는 같다
3. 요소를 이동하라
- 위의 함수를 이용하여 요소를 이동할 수 있다
1) 예제
변경 전
변경 후
<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ border: 1px solid black; } </style></head><p> hat</p><ul id="list"> <li>shirt</li> <li>pants</li></ul><p id="cool"> shoes</p><script> $(function(){ $('#cool').insertBefore('#list'); });</script>
- $('#cool').insertBefore('#list');
'Front-End > jQuery' 카테고리의 다른 글
| [jQuery] 요소 내용 삭제/비우기 - remove(), empty() (0) | 2017.01.04 |
|---|---|
| [jQuery] 기존의 요소 변경 - replaceAll(), replaceWith() (0) | 2017.01.04 |
| [jQuery] 특정 요소 범위에 한정하여 다른요소 검색 - find() (0) | 2017.01.03 |
| [jQuery] html() vs text() 의 차이 (0) | 2017.01.03 |
| [jQuery] 제이쿼리를 이용하여 요소의 속성 읽기/설정 - attr(), prop() (0) | 2017.01.03 |
리딩리드