jQuery 요소 추가 및 삭제 방법

새 HTML 내용 추가
우리는 새로운 내용을 추가하는 데 사용되는 네 가지 jQuery 방법을 배울 것입니다.

append () - 선택한 요소의 끝에 내용을 삽입합니다

prepend() - 선택한 요소의 시작 부분에 내용을 삽입합니다

after () - 선택한 요소 뒤에 컨텐트를 삽입합니다

before () - 요소를 선택하기 전에 컨텐트 삽입

jQuery append() 메서드
jQuery append () 방법은 선택한 요소의 끝에 내용을 삽입합니다.

$("p").append(" ");

jQuery prepend() 메서드
jQuery prepend () 메서드는 선택한 요소의 시작 부분에 내용을 삽입합니다.

$("p").prepend(" ");

append () 와prepend () 방법으로 약간의 새로운 요소를 추가합니다
위의 예에서, 우리는 선택한 요소의 시작/끝에 텍스트/HTML만 삽입합니다.
단, append () 와prepend () 방법은 매개 변수를 통해 무한한 수량의 새로운 요소를 수신할 수 있습니다.jQuery를 통해 텍스트/HTML(위의 예와 같이)을 생성하거나 JavaScript 코드와 DOM 요소를 사용할 수 있습니다.
아래의 예에서, 우리는 몇 개의 새로운 요소를 만들었다.이 요소들은 text/HTML, jQuery 또는 JavaScript/DOM을 통해 만들 수 있습니다.그리고 우리는 append () 방법을 통해 이 새로운 요소를 텍스트에 추가합니다. (prepend () 에도 유효합니다.

function appendText()
{
 var txt1="<p> 。</p>";    //   HTML  
 var txt2=$("<p></p>").text(" 。"); //   jQuery  
 var txt3=document.createElement("p");
 txt3.innerHTML=" 。";    //   DOM   text with DOM
 $("body").append(txt1,txt2,txt3);  //  
}

jQuery after () 및 before () 메서드
jQuery after () 메서드는 선택한 요소에 내용을 삽입합니다.
jQuery before () 메서드는 요소를 선택하기 전에 내용을 삽입합니다.

$("img").after(" ");
 
$("img").before(" ");

after () 와before () 방법으로 약간의 새로운 요소를 추가합니다
after () 와before () 방법은 매개 변수를 통해 무한한 수량의 새로운 요소를 수신할 수 있습니다.text/HTML, jQuery 또는 JavaScript/DOM을 사용하여 새 요소를 만들 수 있습니다.
아래의 예에서, 우리는 약간의 새로운 요소를 창조한다.이 요소들은 text/HTML, jQuery 또는 JavaScript/DOM을 통해 만들 수 있습니다.그리고 우리는 after () 방법을 통해 이 새로운 요소를 텍스트에 삽입합니다. (before () 에도 유효합니다.

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

요소/컨텐트 삭제
요소와 내용을 삭제하려면 다음 두 가지 jQuery 메서드를 사용할 수 있습니다.

remove () - 선택한 요소 (및 하위 요소) 를 삭제합니다

empty () - 선택한 요소에서 하위 요소를 삭제합니다

jQuery remove () 메서드
jQuery remove () 메서드는 선택한 요소와 하위 요소를 삭제합니다.

$("#div1").remove();

jQuery empty () 메서드
jQuery empty () 메서드는 선택한 요소의 하위 요소를 삭제합니다.

$("#div1").empty();

삭제된 요소 필터링
jQuery remove () 방법도 삭제된 요소를 필터할 수 있는 매개 변수를 받아들일 수 있습니다.
이 매개 변수는 jQuery 선택기의 문법일 수 있습니다.
다음 예는 class='italic'의 모든

요소를 삭제합니다.

$("p").remove(".italic");

이상은 jQuery가 원소를 추가하고 삭제하는 방법에 대한 상세한 내용입니다. jQuery가 원소를 추가하고 삭제하는 방법에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!