[jquery] 전용 텍스트 : html()/ text() / append
$(" 태그 ")
: 이렇게 불러온 태그는 " jquery 전용 객체" 다.
=> 여기에는 jquery 전용 용어들만 쓸 수 있다.
즉, 여기다가 직접 value, innerHTML , textContent 같은 DOM용 용어는 못쓴다.
[ innerHTML => html ]
DOM
document.querySelector("#contents").innerHTML = "<input type=password value='1234' >";
=> jquery
$('#contents').html("<input type=password value='1234' >");
= 안하고 ( ) 괄호에 내용을넣어주는 방식
get해서 쓸 때는
alert($('#contents').html( ));
- html( ) 괄호까지 써주는게 innerHTML 값 의미.
SET 할때, 원래 내용이 있으면 지워지고 새로 set 되는 것.
=> 이걸 원래 내용 그대로 두고
A = A + 새로운 내용
이렇게 만들어주는게
[ append ] ( Java 에서 StringBuilder append 와 동일 )
: 즉, 뒤에 그대로 가져다 붙이는 기능
$('#contents').append("<input type=password value='1234' >");
: contents 아이디로 가져온 input 태그에 추가로 뒤에다가
새로운 내용을 붙여넣는다.
< 비슷꾸리 친구들 >
(해당태그에)
[ append ] => 뒤로 쭉 붙임
1 2 3 4 5
[ prepend ] => 앞으로 쭉 붙임
5 4 3 2 1
[ before ] => 해당 태그의 바깥 앞에
div 태그에 .before ( ~ ) ; 붙였다면 그 div 태그의 바깥 앞에
[ after ]=> 해당 태그 바깥 뒤에
div 태그의 바깥 뒤쪽에 생성
[ 삭제하기 ]
$('#contents').html("");
: contents 태그 찾아서 html 값을 "" 빈 값으로 만들어줘 = 삭제.
- 기본적인 사용법은 위와 같고,
innerHTML = html( ) 인것과 마찬가지로,
textContent = text ( )
value = val ( )
- 이렇게 이름바꿔서 사용
- 대입연산자(=) 안쓰고 ( ) 괄호에 바로 값 넣어 서 사용