[JQuery/JavaScript] append() prepend() after() before() 사용해서 요소 앞, 요소 뒤에 요소 추가하기

새로운 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()

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

그러나, 모두 append() 및 prepend() 메소드는 매개 변수로 새로운 요소의 무한한 숫자를 취할 수 있습니다. (우리는 위의 예제에서 수행 한 것처럼) 새로운 요소는 jQuery로, 또는 자바 스크립트 코드와 DOM 요소와 텍스트 / HTML로 생성 할 수 있습니다.

다음 예에서 우리는 몇 가지 새로운 요소를 만들 수 있습니다. 요소는 텍스트 / HTML, jQuery를, 자바 스크립트 / DOM으로 작성됩니다. 그 다음 우리는 함께 텍스트에 새로운 요소를 추가 append() (이 근무했을 법 prepend() 도) :

적용

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.";

    $("p").append(txt1, txt2, txt3);         // Append the new elements 

}

jQuery after() 와 before() 방법

JQuery after() 메소드는 선택한 HTML 요소 AFTER 내용을 삽입합니다.

JQuery before() 메소드는 선택한 HTML 요소 전에 내용을 삽입합니다.

적용

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

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

몇 가지 새로운 요소와 추가 after() 와 before()

또한, 모두 after() 과 before() 메소드는 매개 변수로 새로운 요소의 무한한 숫자를 취할 수 있습니다. (우리는 위의 예에서 수행 한 것처럼) 새로운 요소는 jQuery로, 또는 자바 스크립트 코드와 DOM 요소와 텍스트 / HTML로 생성 할 수 있습니다.

다음 예에서 우리는 몇 가지 새로운 요소를 만들 수 있습니다. 요소는 텍스트 / HTML, jQuery를, 자바 스크립트 / DOM으로 작성됩니다. 그 다음 우리는 함께 텍스트에 새 요소를 삽입 after() 메서드 (이 근무 것이다 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>

}

참고 할 수 있는 사이트 (링크)