[jQuery] DOM 추가와 삭제

새 HTML 콘텐츠 추가

새 콘텐츠를 추가하는 데 사용되는 네 가지 jQuery 메소드는 아래와 같다.

• append() : 선택한 요소의 끝에 내용 삽입
• prepend() : 선택한 요소의 시작 부분에 콘텐츠 삽입
• after() : 선택한 요소 뒤에 내용 삽입
• before() : 선택한 요소 앞에 콘텐츠 삽입

append() / prepend()

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

prepend()메소드는 선택한 HTML 요소의 처음에 콘텐츠를 삽입한다.

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

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

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

append()및 prepend()메소드 모두 무한한 수의 새 요소를 매개 변수로 사용할 수 있다.

새 요소는 텍스트/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있다.

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.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

몇 가지 새 요소를 만든다. 요소는 텍스트/HTML, jQuery 및 JavaScript/DOM으로 생성된다. 그 다음 메소드를 사용하여 새 요소를 텍스트에 추가한다.

after() / before()

after()메소드는 선택한 HTML 요소 뒤에 콘텐츠를 삽입한다.

before()메소드는 선택한 HTML 요소 앞에 콘텐츠를 삽입한다.

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

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

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

after()및 before()메소드도 역시 모두 무한한 수의 새 요소를 매개 변수로 사용할 수 있다.

새 요소는 텍스트/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있다.

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>
}

몇 가지 새 요소를 만든다. 요소는 텍스트/HTML, jQuery 및 JavaScript/DOM으로 생성된다. 그 다음 메소드를 사용하여 새 요소를 텍스트에 추가한다.

요소/콘텐츠 삭제

요소와 콘텐츠를 삭제하기 위해 주로 두 가지 jQuery 메소드를 사용한다.

• remove() : 선택한 요소(및 하위 요소)를 삭제.
• empty() : 선택한 요소에서 하위 요소를 삭제.

remove()

remove()메소드는 선택한 요소와 그 자식 요소를 삭제한다.

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

empty()

empty()메소드는 선택한 요소와 그 자식 요소를 삭제한다.

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

삭제할 요소 필터링

remove()메소드는 삭제할 요소를 필터링할 수 있는 하나의 매개 변수도 허용한다.

매개 변수는 jQuery 선택자 구문 중 하나일 수 있다.

class="test" 인 모든 <p> 요소 삭제하기:

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

class="test", class="demo" 인 모든 <p> 요소 삭제하기:

$("p").remove(".test, .demo");

반응형