//새로운 HTML 내용을 덧붙이기.
//append() : 선택자로 잡힌 요소의 "끝에" 콘텐츠를 넣는다. (자식노드로 들어간다)
//prepend() : 선택자로 잡힌 요소의 "시작부분에" 콘텐츠를 넣는다.
//after() : 선택자로 잡힌 요소의 "다음에" 콘텐츠를 넣는다.
//before() : 선택자로 잡힌 요소의 "이전에" 콘텐츠를 넣는다.
//append - 선택된 요소의 "마지막" 자식노드로 새로운 콘텐츠를 추가한다.
$("p").append("<b>Appended text </b>");
//append 2 - ol하위의 "마지막" 자식노드로 새로운 li노드를 추가한다.
$("ol").append("<li>Appended item</li>")
//prepend - 선택된 요소의 "첫번째" 자식노드로 새로운 콘텐츠를 추가한다.
$("p").prepend("<b> Appended text </b>");
//prepend2 - ol하위의 "첫번째" 자식노드로 새로운 콘텐츠를 추가한다.
$("ol").prepend("<li>Prepended item</li>")
//텍스트 뿐만 아니라, jQuery or JavaScript코드, DOM elements로도 추가 할 수 있다.
//여러개도 가능하다!
function appendText() {
var txt1 = "<p>Text.</p>";
var txt2 = $("<p></p>").text("Text."); //이런 방법은 몰랐다..
var txt3 = document.createElement("p");
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // body내부의 마지막노드에 차례로 붙인다.
}
//after - 선택된 요소의 "다음에" 새로운 요소를 추가한다.
$("img").after("<i>After</i>"); //나의 다음 노드로 들어온다.
//before - 예상한것처럼 선택된 요소의 "이전에" 새로운 요소를 추가한다.
$("img").before("<i>Before</i>"); //나의 이전 노드로 들어온다.
//append/prepend와 마찬가지로 다양한 방법으로 추가 할 수 있다.
//Remove Elements / Content
//remove - 자식요소까지 포함하여 선택자로 지정된 요소를 삭제한다.
//empty - 선택자로 지정된 요소를 제외하고, 자식요소만 삭제한다.
//remove - 자기 자신을 포함하여 자식요소까지 "모두" 삭제한다.
$("#div1").remove();
//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_empty
//empty - 자기 자신을 제외하고, 자식노드만을 "모두" 삭제한다.
$("#div1").empty();
//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove2
//특정노드만을 삭제 할 수도 있다!
//remove메서드는 파라미터를 통해 삭제할 요소를 지정해 줄 수도 있다.
//class가 test인 모든 p elements 삭제하기. (class가 test가 아니라면 삭제 안됨.)
$("p").remove(".test");
//https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove3
//","를 통해서 여러가지 조건을 지정 할 수도 있다.
$("p").remove(".test, .demo"); // p요소중에서 class가 test이거나 demo인 elements전부 삭제
댓글