[jQuery] 제이쿼리 콘텐츠 삽입하기

콘텐츠 내용을 추가하거나, 삽입하는 방법을 설명하고자 합니다.

Using append는   p태그에 문장을 추가하는 것이고

Using prepend는 p태그 앞에 문장을 삽입하는 것입니다.

이번 내용은 before 와 after를 이용해서 콘텐츠를 삽입하는 것입니다.

[이번에 연습할 코드는 다음과같습니다]

먼저 html을 보면

<div id="example">
    <p class="a">문장 1</p>
    <p id="para1">문장 2</p>
    <p class="b">문장 3</p>
    <p id="para4" lang="en-us">문장 4</p>
    <p id="para5" lang="en-gb">문장 5</p>
</div>

 ( 콘텐츠 변경 적용전 이미지 입니다)

여기에 다음을 제이쿼리를 이용해 콘텐츠를 변경해 봅니다.

<script type="text/javascript">
    $("document").ready(function() {
        $("#example p").append(" 콘텐츠 추가");
        $("#example p").prepend(" 안녕! ");
    });

</script>

2. 테스트 : 마지막 p를 첫 p뒤에 붙여 넣는다.

$("#example p:last").appendTo("#example p:first")
//마지막 p를 첫 p 뒤에 추가

3. 테스트 : 마지막 p를 첫 p앞에 붙여 넣는다.

$("#example p:last").prependTo("#example p:first")

4. 테스트

$("#example p").after(" <p>  ----  </p> ");
$("#example p").before("   bbbb   ");

5.Test

$("<p> 뒤에 새로운 문장 추가</p>").insertAfter("#example p:first");
$("<p> 앞에 새로운 문장 추가</p>").insertBefore("#example p:last");