[JQuery] 요소 추가(append, prepend, before, after, wrap, html, text)

 

 

 

 

 

 

 

 

 

기존 요소의 내부에 추가

---

append, prepend, appendTo, prependTo 함수를 사용하면 기존 요소 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.

 

 

append()

'선택된 요소의 마지막'에 새로운 요소나 콘텐츠를 추가

<ol id="player">
    <li>7. SON</li>
    <li>10. MADDISON</li>
</ol>

<script>
    <!-- .append() 함수를 이용하면, 두번째 <li> 뒤에 새로운 HTML 요소를 추가할 수 있다. -->
    $("#player").append("<li>17. ROMERO</li>");
</script>



<!-- 다음과 같이 노출 -->
<ol id="player">
    <li>7. SON</li>
    <li>10. MADDISON</li>
    <li>17. ROMERO</li>
</ol>

 

 

 

prepend()

'선택된 요소의 첫 번째'에 새로운 요소나 콘텐츠를 추가

<ol id="player">
    <li>7. SON</li>
    <li>10. MADDISON</li>
</ol>

<script>
    <!-- .append() 함수를 이용하면, 첫번째 <li>에 앞에 새로운 HTML 요소를 추가할 수 있다. -->
    $("#list").prepend("<li>17. ROMERO</li>");
</script>

<!-- 다음과 같이 노출 -->
<ol id="player">
    <li>17. ROMERO</li>
    <li>7. SON</li>
    <li>10. MADDISON</li>
</ol>

 

 

 

appendTo()

선택된 요소를 '해당 요소의 마지막'에 추가

동작은 .append() 함수와 동일하지만, 소스와 타겟의 위치가 서로 반대로 되어 있음

$(A).appendTo (B) : A가 B사이 마지막에 추가

<p>COME ON YOU</p>

<script>
  <!-- .appendTo() 함수를 이용하면, 첫번째 <p>에 뒤에 새로운 HTML 요소를 추가할 수 있다. -->
  $("<span> SPURS!</span>").appendTo("p");
</script>

<!-- 다음과 같이 노출 -->
<p>COME ON YOU<span> SPURS!</span></p>

 

 

 

prependTo()

선택된 요소를 '해당 요소의 첫 번째'에 추가

동작은 .prepend() 함수와 동일하지만, 소스와 타겟의 위치가 서로 반대로 되어 있음

$(A).prependTo(B) : A가 B사이 처음에 추가

<p>COME ON YOU</p>

<script>
  <!-- .prependTo() 함수를 이용하면, <p>요소 앞에 새로운 HTML 요소를 추가할 수 있다. -->
  $("<span>SPURS! </span>").prependTo("p");
</script>

<!-- 다음과 같이 노출 -->
<p><span>SPURS! </span>COME ON YOU</p>

 

 

 

 

 

 

기존 요소의 외부에 추가

---

before, after, insertBefore, insertAfter 함수를 사용하면 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있다.

 

 

before()

선택한 요소의 '바로 앞쪽'에 새로운 요소나 콘텐츠를 추가

$(A).before(B) : B를 A 바로 앞쪽에 추가

<p>EFG</p>

<script>
<!-- .before() 함수를 이용하면, <p>요소 앞에 새로운 HTML 요소를 추가할 수 있다. -->
$("p").before("<div>ABCD_</div>");
</script>

<!-- 다음과 같이 노출 -->
<div>ABCD_</div><p>EFG</p>

 

 

 

after()

선택한 요소의 '바로 뒤쪽'에 새로운 요소나 콘텐츠를 추가

$(A).after (B) : B를 A 바로 뒤쪽에 추가

<p>EFG</p>

<script>
<!-- .after() 함수를 이용하면, <p>요소 뒤에 새로운 HTML 요소를 추가할 수 있다. -->
$("p").after("<div>ABCD_</div>");
</script>

<!-- 다음과 같이 노출 -->
<p>EFG</p><div>ABCD_</div>

 

 

 

insertBefore()

선택한 요소를 '해당 요소의 앞'에 추가

$(A).insertBefore(B) : A를 B 바로 앞쪽에 추가

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
</div>

<script>
    <!-- .insertBefore() 함수를 이용하면, 클래스가 inner인 요소 앞에 새로운 HTML 요소를 추가할 수 있다. -->
    $("<p>Test</p>").insertBefore( ".inner" );
</script>

<!-- 다음과 같이 노출 -->
<div class="container">
  <h2>Greetings</h2>
  <p>Test</p>
  <div class="inner">Hello</div>
</div>

 

 

insertAfter()

선택한 요소를 '해당 요소의 뒤쪽'에 추가

$(A).insertAfter(B) : A를 B 바로 뒤에 추가

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
</div>

<script>
    <!-- .insertAfter() 함수를 이용하면, 클래스가 inner인 요소 뒤에 새로운 HTML 요소를 추가할 수 있다. -->
    $( "<p>Test</p>" ).insertAfter( ".inner" );
</script>

<!-- 다음과 같이 노출 -->
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
</div>

 

 

 

 

 

 

기존 요소를 포함하는 요소의 추가

---

wrap, wrapAll, wrapInner 함수를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있다.

 

wrap()

'선택한 요소'를 감싸는 새로운 요소를 추가

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<script>
    <!-- .wrap() 함수를 이용하면, 각각의 클래스가 inner인 요소를 새로운 HTML 요소로 감쌀 수 있다. -->
   $( ".inner" ).wrap( "<div class='new'></div>" );
</script>

<!-- 다음과 같이 노출 -->
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

 

 

 

wrapAll()

'선택한 모든 요소'를 모두 한 번에 감싸는 새로운 요소를 추가

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<script>
    <!-- .wrapAll() 함수를 이용하면, 각각의 클래스가 inner인 요소를 모두 한번에 새로운 HTML 요소로 감쌀 수 있다. -->
    $( ".inner" ).wrapAll( "<div class='new' />");
</script>

<!-- 다음과 같이 노출 -->
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

 

 

 

wrapInner()

'선택한 요소 안'을 감싸는 새로운 요소를 추가

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

<script>
    <!-- .wrapInner() 함수를 이용하면, 클래스가 inner인 요소의 안을 새로운 HTML 요소로 감쌀 수 있다.  -->
    $( ".inner" ).wrapInner( "<div class='new'></div>");
</script>

<!-- 다음과 같이 노출 -->
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

 

 

 

 

 

 

 

 

기존 요소의 내부 변경

---

html, text 함수를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 반환하거나 설정할 수 있다.

 

html()

html() 함수는 선택한 요소의 내용을 새로운 HTML 요소로 변경

<p>Hello</p>

<script>
    <!-- .html() 함수를 이용하면, <p> 요소의 내용을 새로운 HTML 요소로 변경할 수 있다. -->
    $("p").html("<div class='wrap'>Good Bye</div>");
</script>

<!-- 다음과 같이 노출 -->
<p>
    <div class='wrap'>Good Bye</div>
</p>

 

 

 

text()

text() 함수는 선택한 요소의 내용을 새로운 단순 text로 변경

<p>Hello</p>

<script>
<!-- .text() 함수를 이용하면, <p> 요소의 내용을 새로운 text로 변경할 수 있다. -->
$("p").text("Good Bye");
</script>

<!-- 다음과 같이 노출 -->
<p>Good Bye</p>

 

 

 

html()와 text()의 차이점

html()는 선택한 요소의 내용에 html 태그 요소가 포함되어 있으면 태그를 적용하여 표시를 하지만, 

text()인 경우는 html 태그를 적용하지 않고 문장 그대로 표시를 하게 된다.