jQuery - Add Elements

새 HTML 콘텐츠 추가

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

 

jQuery append() 메서드

$("p").append("Some appended text.");

 

 

jQuery prepend() 메서드

$("p").prepend("Some prepended text.");

 

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML 
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

 

 

jQuery after() 및 before() 메서드

jQuery after()메서드는 선택한 HTML 요소 뒤에 내용을 삽입합니다.

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

$("img").after("Some text after");

$("img").before("Some text before");

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