제이쿼리 요소추가하기 - append, prepend, after, before

 

새로운 HTML컨텐츠 추가하기

- 새로운 컨텐츠를 추가할때 사용되는 4개의 제이쿼리 메서드

append() - 선택된 요소의 끝부분에 컨텐츠를 삽입

prepend() - 선택된 요소의 시작부분에 컨텐츠를 삽입

after() - 선택된 요소의 다음에 컨텐츠를 삽입

before() - 선택된 요소의 이전에 컨텐츠를 삽입

 

 

 

jQuery append() 메서드

- 제이쿼리의 append() 메서드는 선택된 HTML요소의 끝부분에 컨텐츠를 삽입

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

 

 

jQuery prepend() 메서드

- 제이쿼리의 prepend() 메서드는 선택된 HTML요소의 시작부분에 컨텐츠를 삽입

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

 

 

 

※append()와 prepend()메서드는 인수에 무한에 가까운 수 만큼의 새로운 요소를 넣을 수도 있습니다.

※새로운 요소는 text/HTML이나 자바스크립트나, 제이쿼리 DOM요소를 사용하여 만들 수 있습니다.

 

 

예제_

 

function appendText() {

 var txt1 = "<p>Text.</p>";   //HTML요소를 생성

 var txt2 = $("<p></p>").text("Text.");   //제이쿼리로 생성

 var txt3 = document.createElement("p");   //DOM으로 생성

 txt3.innerHTML = "Text.";

 $("body").append(txt1, txt2, txt3);   //새로운 요소를 추가

}

 

 

 

 

jQuery after() 와 before() 메서드

- jQuery after() 메서드는 선택된 HTML요소의 다음에 컨텐츠를 삽입

- jQuery before() 메서드는 선택된 HTML요소의 이전에 컨텐츠를 삽입

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

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

 

 

 

 

 

 

[블로그참고]

https://blog.naver.com/hadaboni80/221742245028

제이쿼리 요소추가하기 - append, prepend, after, before