[jQuery] 제이쿼리 콘텐츠 변경방법

제이쿼리를 이용한 콘텐츠 변경방법입니다.

먼저Html은

[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>

제이쿼리 스크립트 입니다.

오늘 배울 내용은

1. 콘텐츠 속성변경

<meta charset="UTF-8">
<link rel="stylesheet" href="../style.css" />
<script type="text/javascript" src="../jquery-3.0.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
    $("#example p").wrap("<div style='color:red' />");
    $("#example p").wrapAll("<div style='color:red' />");

});
</script>

결과는 같지만

소스 코드가 다릅니다. 

왼쪽이 첫번째로, 각 p마다 코드가 적용된 것입니다.

오른쪽은 div 전체에 적용 되었습니다.

2. Empty

("#example").empty();

3. Remove

$("#example p.a, #example p.b").remove();

p의 클래스가 a 와 b인 1줄, 3줄이 지워집니다.

4.  detatch : remove와 보이는것은 같지만, 임시적으로 안보이게 하는 것으로서, 다른 이벤트 핸들러를 이용해 보이게 할 수 있습니다.

$("#example p.a, #example p.b").detach();

5. 문장교체 : replaceAll

$("<div> 문장 대치 됨 </div>").replaceAll("#example p[id]");

6. 문장 교체

$("#example p[id]").replaceWith("<div> replaceWith로 문장 대치 됨 </div>")

7. 문장 교체 2 : function이용 

    <script type="text/javascript">
    $("document").ready(function() {
//        $("#example p").wrap("<div style='color:red' />");

//        $("#example p").wrapAll("<divstyle='color:red' />");

//        //Empty Function
//        $("#example").empty();
//        $("#example p.a, #example p.b").remove();
//        $("#example p.a, #example p.b").detach();

//        $("<div> 문장 대치 됨 </div>").replaceAll("#example p[id]");
//        $("#example p[id]").replaceWith("<div> replaceWith로 문장 대치 됨 </div>"
        $("#example p").replaceWith(replacementFn);
    });
    function replacementFn() {
        if ($(this).text().indexOf("1") != -1) {
            return "<p> 대치된 패러그래프 </p>"
        } else {
            return this.outerHTML;
        }
    }
    </script>