[jQuery] add/remove HTML element

Add element (append / prepend / after / before)

    HTML element를 새로 추가하는 방법을 알아보자. append/prepend는 HTML content를 추가할 때 쓴다. HTML element의 끝에 추가하고자 할 때는 append()를 사용한다. 반대로 앞에 추가하고자 할 때는 prepend()를 사용한다. 여러 element들을 추가할 때는 append()와 prepend()의 인자를 여러 개로 주면 된다.

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

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

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 
}

    after/before는 HTML의 tag 외에 element 자체를 추가할 때 사용한다. 사용법은 append(), prepend()와 동일하다.

$("img").after("Some text after");
$("img").before("Some text 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
} 

Remove element (remove / empty)

    HTML element를 제거하는 방법을 알아보자. remove()는 해당 HTML element와 element의 child element를 모두 제거한다. empty()는 해당 HTML element는 제거하지 않고 child element들만 제거한다. remove에 인자를 넘겨줄 경우, remove될 element 중에서 인자에 해당하는 selector만을 골라서 제거할 수 있다.

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

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

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

출처 : http://www.w3schools.com