1) 문서 객체의 내부 검사
<script>
$(document).ready(function() {
//html( ) 메서드 - Getter
console.log('div->', $('div').html());
//text( ) 메서드 - Getter
console.log('div->', $('div').text());
});
</script>
</head>
<body>
<div>
<h1> 네이버 </h1>
<h1> 카카오 </h1>
<h1> 페이스북 </h1>
</div>
2) 문서 객체의 내부 추가
$('button').first().click(function() {
$('div>h1').html('<h4>html</h4>');
});
$('button').first().click(function() {
$('div>h1').text('<h4>text</h4>');
});
$('button').first().click(function() {
$('div>h1').html(function(index){
return '<h'+(index+2)+'>안녕!</h'+(index+2)+'>';
});
$('button').first().click(function() {
$('div>h1').text(function(index){
return '<h'+(index+2)+'>안녕!</h'+(index+2)+'>';
});
});
3) 문서 객체 제거
$('button').first().click(function() {
$('div').empty();
});
$('button').first().click(function() {
$('div>h1:first').remove();
});
'front-end > Javascript & jquery' 카테고리의 다른 글
| [jquery] 이벤트 연결 범위 한정 / delegate 방식 (0) | 2020.12.03 |
|---|---|
| [jquery] 이벤트 / on() / 제이쿼리 이벤트 전달(버블링) 막기 (bubbling) (6) | 2020.12.03 |
| [jquery] 문서 객체 생성, 삽입, 이동 / $() / appendTo() / append() (0) | 2020.12.02 |
| [jquery] 문서 객체의 속성 컨트롤 /addClass() / attr() / css() (0) | 2020.12.02 |
| [jquery] innerhtml과 같은 기능 (0) | 2020.12.02 |
| [jquery] 특정태그 선택 / xml 파싱 / $.parseXML() (0) | 2020.12.02 |
| [jquery] 문서 객체 선택과 탐색 / filter / end / eq / first / last / add (0) | 2020.12.02 |