jQuery - Add Elements

jQuery를 사용하면 새로운 요소/콘텐츠를 쉽게 추가할 수 있습니다.

새 콘텐츠를 추가하는 데 사용되는 네 가지 jQuery 메서드를 살펴 보겠습니다.

• append() - 선택한 요소의 끝에 콘텐츠를 삽입합니다.
• prepend() - 선택한 요소의 시작 부분에 콘텐츠를 삽입합니다.
• after() - 선택한 요소 뒤에 콘텐츠를 삽입합니다.
• before() - 선택한 요소 앞에 콘텐츠를 삽입합니다.

jQuery append() 메서드는 선택한 HTML 요소의 끝 부분에 콘텐츠를 삽입합니다.

    $(document).ready(function () {
      $("#btn1").click(function () {
        $("p").append("<b>Appended text</b>.")
      });
 
      $("#btn2").click(function () {
        $("ol").append("<li>Appended item</li>");
      });
    });

jQuery prepend() 메서드는 선택한 HTML 요소의 시작 부분에 콘텐츠를 삽입합니다.

    $(document).ready(function () {
      $("#btn1").click(function () {
        $("p").prepend("<b>Prepended text</b>.");
      });
 
      $("#btn2").click(function () {
        $("ol").prepend("<li>Prepended item</li>");
      });
    });

위의 두 예제에서, 선택한 HTML 요소의 시작/끝 부분에 일부 텍스트/HTML만 삽입했습니다.

그러나 append() 및 prepend() 메서드 두 개 모두, 무한한 수의 새 요소를 매개 변수로 사용할 수 있습니다.
위의 예에서 한 것처럼 텍스트/HTML로, jQuery 또는 JavaScript 코드 그리고 DOM 요소를 사용하여,
새로운 요소들을 생성할 수 있습니다.

다음 예에서는 몇 가지 새로운 요소들을 만듭니다. 요소들은 text/HTML, jQuery 및 JavaScript/DOM으로 생성됩니다.
그런 다음 append() 메서드를 사용하여 텍스트에 새 요소를 추가합니다.
(prepend()에서도 실행될 것입니다).

    function appendText() {
      var txt1 = "<p>사랑해!</p>";                   // Create text with HTML
      var txt2 = $("<p></p>").text("I love you.");  // Create text with jQuery
      var txt3 = document.createElement("p");
      txt3.innerHTML = "Je t'aime.";                // Create text with DOM
      $("body").append(txt1, txt2, txt3);           // Append new elements
    }

jQuery after() 메서드는 선택한 HTML 요소들 뒤(AFTER)에 콘텐츠를 삽입합니다.

jQuery before() 메서드는 선택한 HTML 요소들 앞(BEFORE)에 콘텐츠를 삽입합니다.

    $(document).ready(function () {
      $("#btn1").click(function () {
        $("img").before("<b>Before</b>");
      });
      $("#btn2").click(function () {
        $("img").after("<i>After</i>");
      });
    });

또한 after() 및 before() 메서드 두 개 모두 무한한 수의 새 요소들을 매개 변수로 사용할 수 있습니다.
위의 예제에서 한 것처럼 text/HTML, jQuery 또는 JavaScript 코드 그리고 DOM 요소를 사용하여,
새로운 요소들을 생성할 수 있습니다.

다음 예제에서는, 몇 가지 새로운 요소들을 만듭니다.
요소들은 text/HTML, jQuery 및 JavaScript/DOM으로 생성됩니다.
그런 다음 after() 메서드를 사용하여 새 요소들을 텍스트에 삽입합니다
(이것은 before()에서도 실행될 것입니다).

    function afterText() {
      var txt1 = "<b>We </b>";                 // Create element with HTML
      var txt2 = $("<i></i>").text("like ");  // Create with jQuery
      var txt3 = document.createElement("b"); // Create with DOM
      txt3.innerHTML = "jQuery!!!!!";
      $("img").after(txt1, txt2, txt3);       // Insert new elements after img
    }

모든 jQuery HTML 메서드에 대한 전체 개요를 보려면, jQuery HTML/CSS Reference로 이동하십시오.