jQuery - DOM 요소를 추가 (또는 삭제)하기

다음 표의 메소드를 이용하면 해당하는 요소를 조작할 수 있습니다.

메소드	설 명
.append() .appendTo().	선택한 요소의 자식요소 맨 끝에 새로운 내용을 추가 Ex.1) $(선택한 요소).append(추가요소) Ex.2) $(추가요소).appendTo(선택한 요소)
.prepend() .prependTo()	선택한 요소의 자식요소 맨 앞에 새로운 내용을 추가 Ex.1) $(선택한 요소). prepend (추가요소) Ex.2) $(추가요소). prependTo (선택한 요소)
.after() .insertAfter()	선택한 요소 뒤에 새로운 내용을 추가 Ex.1) $(선택한 요소).after(추가요소) Ex.2) $(추가요소).insertAfter(선택한 요소)
.before() .insertBefore()	선택한 요소 앞에 새로운 내용을 추가 Ex.1) $(선택한 요소). before (추가요소) Ex.2) $(추가요소). insertBefore (선택한 요소)
.replaceAll() .replaceWith()	선택한 요소를 새로운 요소로 변경 Ex.1) $(변경 요소). replaceAll (선택한 요소) Ex.2) $(선택한 요소). replaceWith (변경 요소)
.clone(boolean)	선택한 요소를 복사 boolean에는 true | false 중 하나 true이면 하위 요소 모두를 복사합니다.
.detach()	자식요소를 포함하여 선택한 요소를 삭제 (단, 삭제한 요소를 변수에 담아 재사용 가능)
.remove()	자식요소를 포함하여 선택한 요소를 삭제
.empty()	선택한 요소의 모든 자식요소와 내용을 제거 (단, 선택한 요소는 삭제하지 않음)
.wrap()	선택한 각 요소 주위에 지정된 요소로 감싸기
.wrapAll()	선택한 요소 주위에 지정된 요소로 한꺼번에 감싸기
.wrapInner()	지정된 요소를 선택한 요소의 하위요소로 감싸기
.unwrap()	선택한 요소의 부모 요소를 삭제
.index()	선택한 요소의 지정한 자식요소의 인덱스를 반환
.get()	선택한 모든 요소를 배열로 반환
.html()	선택한 요소의 내용(HTML + 텍스트)을 얻거나 설정
.text()	선택한 요소의 내용(텍스트)을 얻거나 설정

.append() 와 .prepend()

이 메소드는 선택한 요소의 맨 앞이나 맨 마지막에 새로운 요소나 내용을 추가할 수 있습니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 // 맨 앞에 요소를 추가
 $(".use-nth").prepend("<div style='background:red;'>처음 요소</div>");

 // 맨 마지막에 요소를 추가
 $(".use-nth").append("<div style='background:yellow;'>마지막 요소</div>");
});
</script>

<div class="use-nth">
  <div class="2">사파리</div>
  <div class="3">크롬</div>
  <div class="4">엣지</div>
  <div class="5">파이어폭스</div>
  <div class="6">익스플러어</div>
</div>

이제 맨 앞이나 맨 마지막에 새로운 내용을 추가해 보겠습니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 // 맨 앞에 내용을 추가
 $(".use-nth").prepend("안녕!");

 // 맨 마지막에 내용을 추가
 $(".use-nth").append(" 만나서 반가워~");
});
</script>

<div class="use-nth">
  하보니
</div>

.after() 와 before()

.append() 나 .prepend() 는 선택한 요소의 자식요소 맨 앞이나 맨 뒤에 추가하는 반면 .after() 과 .before() 는 선택한 요소의 형제요소 뒤나 앞에 추가합니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 // 선택한 요소 맨 끝에 삽입
 $(".use-nth").after("<div style='background:red;'>사파리</div>");

 // 선택한 요소 맨 처음에 삽입
 $(".use-nth").before("<div style='background:yellow;'>익스플러어</div>");
});
</script>

<div class="use-nth">
  <div class="3">크롬</div>
  <div class="4">엣지</div>
  <div class="5">파이어폭스</div>
</div>

선택한 요소의 이전이나 다음에 새로운 요소를 추가합니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 // 선택한 요소 다음에 삽입
 $(".use-nth .3").after("<div style='background:red;'>구글</div>");

 // 선택한 요소 이전에 삽입
 $(".use-nth .5").before("<div style='background:yellow;'>하보니</div>");
});
</script>

<div class="use-nth">
  <div class="2">사파리</div>
  <div class="3">크롬</div>
  <div class="4">엣지</div>
  <div class="5">파이어폭스</div>
  <div class="6">익스플러어</div>
</div>

.replaceAll() 와 .clone()

.replaceAll() 은 선택한 요소를 새로운 요소로 교체하고, .clone() 는 선택한 요소를 복사를 합니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 var clone = $(".use-nth").clone(true);

 $(clone).replaceAll(".use-nth2");
});
</script>

<div class="use-nth2">
  하보니
</div>

<div class="use-nth">
  <div class="2">사파리</div>
  <div class="3">크롬</div>
  <div class="4">엣지</div>
  <div class="5">파이어폭스</div>
  <div class="6">익스플러어</div>
</div>

.detach() 와 .empty()

.remove() 는 선택한 요소와 자식요소 모두를 삭제하지만 .empty() 는 선택한 요소를 제외한 자식요소를 제거합니다. 따라서 .detach() 를 적절히 활용하면 요소를 이동시키는 효과를 얻을 수 있습니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 var val = $(".use-nth").detach();

 $(".use-nth2").replaceWith(val);
});
</script>

<div class="use-nth2">
  하보니
</div>

<div class="use-nth">
  <div class="2">사파리</div>
  <div class="3">크롬</div>
  <div class="4">엣지</div>
  <div class="5">파이어폭스</div>
  <div class="6">익스플러어</div>
</div>

다음은 자식요소 중에서 class 속성을 가진 요소만 제거합니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
}
</style>

<script>
$(function(){
 $(".use-nth div").detach("[class]");
});
</script>

<div class="use-nth2">
  하보니
</div>

<div class="use-nth">
  <div class="2">사파리</div>
  <div class="3">크롬</div>
  <!-- 엣지만 제거되지 않습니다. -->
  <div>엣지</div>
  <div class="5">파이어폭스</div>
  <div class="6">익스플러어</div>
</div>

.wrap(), .wrapAll(), .wrapInner(), .unwrap()

선택한 요소에 지정한 요소로 상위요소를 감쌀 수 있습니다. 예를 들어 <div> 태그마다 상위에 <p> 요소를 부모요소로 삽입합니다.

<p class='use-nth'>
  <div>하보니</div>
</p>
<p class='use-nth'>
  <div>PHP</div>
</p>

아래 예시는 단순히 <div> 태그에 <p> 태그로 삽입한 결과입니다.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
  background: yellow;
}
</style>

<script>
$(function(){
 $("div").wrap("<p class='use-nth'></p>");
});
</script>

<div>하보니</div>
<div>PHP</div>

다음은 .wrapAll() 에 대한 예제입니다. .wrapAll() 는 .wrap() 와는 달리 해당하는 모든 요소의 부모요소로 삽입합니다.

<p class='use-nth'>
  <div>하보니</div>
  <div>PHP</div>
</p>

이렇게 말이지요.

<style>
.use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
  background: yellow;
}
</style>

<script>
$(function(){
 $("div").wrapAll("<p class='use-nth'></p>");
});
</script>

<div>하보니</div>
<div>PHP</div>

.wrapInner() 는 지정된 요소를 선택한 요소의 하위요소로 감쌀 수 있습니다.

<div>
  <b>하보니</b>
</div>
<div>
  <b>PHP</b>
</div>

<script>
$(function(){
 $("div").wrapInner("<b/>");
});
</script>

<div>하보니</div>
<div>PHP</div>

.index()

.index() 는 선택한 요소의 자식요소 중에서 매치하는 요소의 인덱스를 반환합니다. 다음은 "div" 요소 중에서 "class=5" 인 인덱스를 반환합니다.

<script>
$(function(){
 var indexNum = $("div").index($(".5"));
 console.log(indexNum);
 /* 결과: 5 */
});
</script>

<!-- index: 0 -->
<div class="0">
  <!-- index: 1 -->
  <div class="1">알 수 없는 브라우저</div>
  <!-- index: 2 -->
  <div class="2">사파리</div>
  <!-- index: 3 -->
  <div class="3">크롬</div>
  <!-- index: 4 -->
  <div class="4">엣지</div>
  <!-- index: 5 -->
  <div class="5">파이어폭스</div>
  <!-- index: 6 -->
  <div class="6">익스플러어</div>
  <!-- index: 7 -->
  <div class="7">기타</div>
</div>

.get()

.index() 와는 반대로 지정한 인덱스에 매치되는 요소를 찾습니다. 인덱스를 지정하지 않으면 매치하는 모든 요소를 배열로 반환합니다.

<li> 요소 중에서 세 번째 요소를 찾아 콘솔에 출력합니다.

<script>
$(function(){
  var get = $("li").get(2);

  console.log(get);
  /* 결과: <li>파이어폭스</li> */
});
</script>

<ul>
  <li>사파리</li>
  <li>크롬</li>
  <li>파이어폭스</li>
  <li>IE</li>
</ul>

매치하는 모든 요소를 찾으려면 매개변수를 생략하세요.

<script>
$(function(){
  var arr = $("li").get();

  for(i in arr){
    console.log(arr[i]);
  }
  /*
  결과:
    <li>사파리</li>
    <li>크롬</li>
    <li>파이어폭스</li>
    <li>IE</li>
  */
});
</script>

<ul>
  <li>사파리</li>
  <li>크롬</li>
  <li>파이어폭스</li>
  <li>IE</li>
</ul>

.val() 과 .html()

val() 과 html() 의 차이점은 문자열로 얻거나 아니면 HTML 태그로 얻을 수 있습니다.

<script>
$(function(){
 $("div.1").html("<b>안녕 하보니~</b>");

 $("div.2").text("<b>안녕 하보니~</b>");
});
</script>

<div class="1">하보니</div>
<div class="2">PHP</div>