제목:

jQuery로 웹 사이트 내부 요소 추가하기

날짜: Posted on

이 포스트에서는 웹 사이트에서 내부 요소를 추가하는 jQuery 코드에 대해서 서술합니다.

요소를 추가하는 방법은 추가 위치에 따라 다음과 같이 4가지로 분류할 수 있습니다.

  • 형제 요소를 지정해서 해당 요소의 다음에 추가
  • 형제 요소를 지정해서 해당 요소의 앞에 추가
  • 부모 요소를 지정해서 해당 요소의 끝부분에 자식 요소로 추가
  • 부모 요소를 지정해서 해당 요소의 첫부분에 자식 요소로 추가

위 4가지 방법에 따라 다른 메소드를 사용하는데, 다음과 같습니다.

after 또는 insertAfter
선택한 요소의 바로 다음 위치에 형제 요소로 추가합니다.
사용법: $(선택요소).after(추가요소); 또는 $(추가요소).insertAfter(선택요소);
before 또는 insertBefore
선택한 요소의 바로 앞 위치에 형제 요소로 추가합니다.
사용법: $(선택요소).before(추가요소); 또는 $(추가요소).insertBefore(선택요소);
append 또는 appendTo
선택한 요소의 끝부분에 자식 요소로 추가합니다. 마지막 자식 요소에 after를 호출한 것과 결과가 같습니다.
사용법: $(선택요소).append(추가요소); 또는 $(추가요소).appendTo(선택요소);
prepend 또는 prependTo
선택한 요소의 첫부분에 자식 요소로 추가합니다. 첫 자식 요소에 before를 호출한 것과 결과가 같습니다.
사용법: $(선택요소).prepend(추가요소); 또는 $(추가요소).prependTo(선택요소);

추가요소에는 추가할 요소를 직접 HTML 형식으로 넣을 수도 있고, 다른 요소를 직접 선택해서 추가할 수 있습니다. 단, 추가요소를 다른 요소로 선택해서 하는 경우 선택요소의 알맞은 위치에 해당 요소가 추가됨과 동시에 기존의 해당 요소는 삭제됩니다. 즉 추가될 위치에 기존 요소가 이동하게 되는 것입니다.

샘플 페이지의 코드는 다음과 같습니다. 다음 두 코드는 실행 결과가 같습니다.

샘플 1:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>jQuery Add element Sample 1</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
          var cnt = 0;
          $(document).ready(function(){
            // New after Foo
            $("#New_after_Foo").click(function(){
              $("#Foo").after("<p class=\"new\">New #" + (++cnt) + "</p>");
            });
            // New before Foo
            $("#New_before_Foo").click(function(){
              $("#Foo").before("<p class=\"new\">New #" + (++cnt) + "</p>");
            });
            // Append new
            $("#Append_new").click(function(){
              $("#Para").append("<p class=\"new\">New #" + (++cnt) + "</p>");
            });
            // Prepend new
            $("#Prepend_new").click(function(){
              $("#Para").prepend("<p class=\"new\">New #" + (++cnt) + "</p>");
            });
            // Foo after Bar
            $("#Foo_after_Bar").click(function(){
              $("#Bar").after($("#Foo"));
            });
            // Foo before Bar
            $("#Foo_before_Bar").click(function(){
              $("#Bar").before($("#Foo"));
            });
            // Append Foo
            $("#Append_Foo").click(function(){
              $("#Para").append($("#Foo"));
            });
            // Prepend Foo
            $("#Prepend_Foo").click(function(){
              $("#Para").prepend($("#Foo"));
            });
            // Remove all new
            $("#Remove_all_added").click(function(){
              $("#Para .new").remove();
              cnt = 0;
            });
          });
        </script>
    </head>
    <body>
        <h1>jQuery Append Sample 1</h1>
        <p>
            <button type="button" id="New_after_Foo">New after Foo</button>
            <button type="button" id="New_before_Foo">New before Foo</button>
            <button type="button" id="Append_new">Append new</button>
            <button type="button" id="Prepend_new">Prepend new</button><br />
            <button type="button" id="Foo_after_Bar">Foo after Bar</button>
            <button type="button" id="Foo_before_Bar">Foo before Bar</button>
            <button type="button" id="Append_Foo">Append Foo</button>
            <button type="button" id="Prepend_Foo">Prepend Foo</button><br />
            <button type="button" id="Remove_all_added">Remove all added</button>
        </p>
        <hr />
        <div id="Para">
            <p id="Foo">Foo</p>
            <p id="Bar">Bar</p>
        </div>
    </body>
</html>

샘플 2:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>jQuery Add element Sample 2</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
          var cnt = 0;
          $(document).ready(function(){
            // New after Foo
            $("#New_after_Foo").click(function(){
              $("<p class=\"new\">New #" + (++cnt) + "</p>").insertAfter("#Foo");
            });
            // New before Foo
            $("#New_before_Foo").click(function(){
              $("<p class=\"new\">New #" + (++cnt) + "</p>").insertBefore("#Foo");
            });
            // Append new
            $("#Append_new").click(function(){
              $("<p class=\"new\">New #" + (++cnt) + "</p>").appendTo("#Para");
            });
            // Prepend new
            $("#Prepend_new").click(function(){
              $("<p class=\"new\">New #" + (++cnt) + "</p>").prependTo("#Para");
            });
            // Foo after Bar
            $("#Foo_after_Bar").click(function(){
              $("#Foo").insertAfter("#Bar");
            });
            // Foo before Bar
            $("#Foo_before_Bar").click(function(){
              $("#Foo").insertBefore("#Bar");
            });
            // Append Foo
            $("#Append_Foo").click(function(){
              $("#Foo").appendTo("#Para");
            });
            // Prepend Foo
            $("#Prepend_Foo").click(function(){
              $("#Foo").prependTo("#Para");
            });
            // Remove all new
            $("#Remove_all_added").click(function(){
              $("p").remove(".new");
              cnt = 0;
            });
          });
        </script>
    </head>
    <body>
        <h1>jQuery Append Sample 2</h1>
        <p>
            <button type="button" id="New_after_Foo">New after Foo</button>
            <button type="button" id="New_before_Foo">New before Foo</button>
            <button type="button" id="Append_new">Append new</button>
            <button type="button" id="Prepend_new">Prepend new</button><br />
            <button type="button" id="Foo_after_Bar">Foo after Bar</button>
            <button type="button" id="Foo_before_Bar">Foo before Bar</button>
            <button type="button" id="Append_Foo">Append Foo</button>
            <button type="button" id="Prepend_Foo">Prepend Foo</button><br />
            <button type="button" id="Remove_all_added">Remove all added</button>
        </p>
        <hr />
        <div id="Para">
            <p id="Foo">Foo</p>
            <p id="Bar">Bar</p>
        </div>
    </body>
</html>

이 코드의 샘플 링크는 다음과 같습니다.
https://pjw48.net/samp/jquery_add_element_sample_1.html
https://pjw48.net/samp/jquery_add_element_sample_2.html

위 샘플 링크를 통해 들어가셔서 버튼들을 하나씩 눌러 보시면 각 메소드들의 차이를 보실 수 있습니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다