jQuery w3schools 한글판 강좌51 - jQuery prepend() 메소드

 

jQuery prepend() 메소드는 선택된 HTML요소의 시작부에 컨텐트를 삽입니다.  

 

Example

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

 

append() 와 prepend()를 이용한 새로운 여러개 요소들 삽입

앞에서 나온 두개의 예제 모두에서는 선택된 HTML요소의 시작부/끝부분에 몇번의 텍스트 또는 HTML 을 삽입만 했습니다.  

그러나 append(), prepend() 메소드 모두 무한개의 새 요소들을 매개변수로 가질수 있습니다.

새 요소들은 위 예제에서 본것처럼 텍스트 또는 HTML을 이용하여 생성될수 있으며,

jQuery, 자바스크립트코드 그리고 DOM요소들을 이용하여도 생성할수 있습니다.

 

 

다음 예에서, 우리는 약간의 새 요소들을 생성합니다. 요소들은 text/HTML, jQuery, 자바스크립트/DOM으로 생성됩니다.

그런후 우리는 append()메소드를 가지고 텍스트에 새 요소를 추가합니다.

(이 방법은 prepend()메소드에 대해서도 역시 같은 방법으로 적용됩니다) :

 

Example

function appendText() {
    var txt1 = "<p>Text.</p>";               // HTML을 이용 요소 생성
    var txt2 = $("<p></p>").text("Text.");   // jQuery 이용 생성
    var txt3 = document.createElement("p");  // DOM을 이용해서 생성
    txt3.innerHTML = "Text.";
    $("body").append(txt1, txt2, txt3);      // 새 요소 추가
}