요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML
요소에 작성된 내용을 얻어옴(태그 포함 x) == innerTEXT
value 속성 값을 얻어옴
요소에 내용 출력 (태그 인식o)
요소에 내용 출력 (태그 인식 x)
value 속성 값을 지정
<style>
.cls1{color : red}
</style>
.
.
.
<div id="area">
<p class="cls1">기존에 작성되어 있는 요소</p>
</div>
<button type="button" id="btn1">html() 메소드</button>
<button type="button" id="btn2">text() 메소드</button>
<input type="text" id="inputId" value="apple">
<button id="btn3">val() 메소드</button>
// html() 버튼
$("#btn1").on("click", function(){
// 아이디가 area인 요소의 내용을 모두 삭제
$("#area").html("");
// 아이디가 area인 요소의 내용 출력 (태그 인식 O)
$("#area").html("<p>html() 메소드로 작성된 내용</p>")
});
// text() 버튼
$("#btn2").on("click", function(){
// 아이디가 area인 요소의 내용을 모두 삭제
$("#area").text("");
// 아이디가 area인 요소의 내용 출력 (태그 인식 X)
$("#area").text("<p>text() 메소드로 작성된 내용</p>")
});
// val() 버튼
$("#btn3").on("click", function(){
// 아이디가 inputId인 요소의 값 삭제
$("#inputId").val("");
// 아이디가 inputId인 요소에 값 대입
$("#inputId").val("cherry");
})
처음 화면
'html() 메소드' 버튼을 눌렀을 때
'text() 메소드' 버튼을 눌렀을 때
'val() 메소드' 버튼을 눌렀을 때
선택자 요소(A)를 기준으로 삽입 메소드 매개변수에 생성된 요소(B) 또는 함수의 리턴값을 추가
A요소 내 뒷부분에 B를 추가(자식)
A요소 내 앞부분에 B를 추가(자식)
A의 요소 뒷부분에 B를 추가(형제)
A의 요소 앞부분에 B를 추가(형제)
생성된 요소(B)를 매개변수로 지정한 선택자(A) 요소에 추가
(part1의 메소드와 선택자, 생성구문의 순서가 반대)
B를 A의 요소 내 뒷부분에 추가(자식)
B를 A의 요소 내 앞부분에 추가(자식)
B를 A의 요소 뒤에 추가(형제)
B를 A의 요소 앞에 추가(형제)
자식 요소들을 모두 제거하는 메소드
-> 특정 요소 내부를 비움
요소 잘라내기, 관련 이벤트 삭제
요소 잘라내기, 관련 이벤트도 같이 잘라냄
<style>
.lime{ background-color: lime;}
</style>
.
.
.
<div id="area2">
<ul id="list2"></ul> <!-- 기준 -->
</div>
<hr>
<button id="btn2-1">empty()</button>
<button id="btn2-2">remove()</button>
<button id="btn2-3">detach()</button>
<div id="area3">
<div class="item" id="div3">
안녕하세요.
</div>
<div class="item" id="div4">
안녕하세요.
</div>
</div>
<hr>
<div id="area4">
<div class="item" id="div5">
안녕하세요.
</div>
</div>
$(document).ready(function(){
let count = 1;
// append() : 마지막 자식 요소로 추가
$("#list2").append("<li>리스트" + count++ + "</li>");
$("#list2").append("<li>리스트" + count++ + "</li>");
$("#list2").append("<li>리스트" + count++ + "</li>");
// prepend() : 첫 번째 자식 요소로 추가
$("#list2").prepend("<li>리스트" + count++ + "</li>");
$("#list2").prepend("<li>리스트" + count++ + "</li>");
$("#list2").prepend("<li>리스트" + count++ + "</li>");
for(let i=0; i<3; i++){
const el = "<p>새로 추가된 요소" + i + "</p>";
// before() 바로 이전 형제 요소 추가
// after() 바로 다음 형제 요소 추가
$("#list2").before(el);
$("#list2").after(el);
}
})
// empty() 버튼
$("#btn2-1").on("click", function(){
// empty() : 자식 요소들을 모두 제거하는 메소드
// -> 특정 요소 내부를 비움
// id area3인 요소의 내부를 비움
$("#area3").empty();
})
// id div3인 요소에 마우스가 들어왔다 나갔다 할 때의 동작
// $("#div3").hover(function(){} , function(){})
// // 들어왔을 때 나갔을 때
$("#div3").hover(function(){
// console.log( $("div3") );
// 마우스가 들어왔을 때 현재 요소에 lime 클래스를 추가
// $("#div3").addClass("lime");
$(this).addClass("lime");
} , function(){
// 마우스가 나갔을 대 현재 요소에서 lime 클래스를 제거
$("#div3").removeClass("lime");
});
// remove() 버튼
$("#btn2-2").on("click", function(){
// remove() : 요소 잘라내기, 관련 이벤트 삭제
const el = $("#div3").remove();
console.log(el);
$("#area4").append(el);
})
// detach() 버튼
$("#btn2-3").on("click", function(){
// detach() : 요소 잘라내기, 관련 이벤트도 같이 잘라냄
const el = $("#div3").detach();
$("#area4").append(el);
})
처음 화면
'empty()' 버튼을 눌렀을 때
'remove()' 버튼을 눌렀을 때
-> remove()가 수행되자 .lime에 적용된 css(배경색을 lime 색으로 변경)가 제거된 모습을 볼 수 있다.
'detach()' 버튼을 눌렀을 때
-> remove()와는 다르게 관련된 이벤트(.lime에 적용된 배경색)가 함께 잘라진 모습이다.