요소 추가

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

새 HTML 콘텐츠 추가

새로운 콘텐츠를 추가하는 데 사용되는 네 가지 jQuery 메서드를 살펴보.

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

jQuery append()

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

예제

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

jQuery prepend()

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

예제

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

append() 및 prepend()를 사용하여 여러 가지 새 요소 추가

append() 및 prepend() 메소드 모두 무한한 수의 새 요소를 매개변수로 사용할 수 있다.
새 요소는 TEXT/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있다.

예제

function appendText() {
  var txt1 = "
Text.
";               // Create element with HTML 
  var txt2 = $("
").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");

after() 및 before()를 사용하여 여러 가지 새 요소 추가

after()및 before()메소드 모두 무한한 수의 새 요소를 매개변수로 사용할 수 있다.
새 요소는 TEXT/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있다.

예제

function afterText() {
  var txt1 = "I ";                    // Create element with HTML 
  var txt2 = $("").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>
}

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기