1. 요소 추가
| $(셀렉터).append( "추가 내용" ) | 선택한 요소 내 마지막 요소에 추가 |
| $(셀렉터).prepend( "추가 내용" ) | 선택한 요소 내 시작점에 추가 |
| $(셀렉터).after( "추가 내용" ) | 선택한 요소 바로 뒷 부분에 추가 |
| $(셀렉터).before( "추가 내용" ) | 선택한 요소 바로 앞 부분에 추가 |
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ol>
<li>List Item 1</li>
</ol>
<button>append()</button>
<button>prepend()</button>
<button>after()</button>
<button>before()</button>
</body>
<script>
var i = 1;
$('button').click(function(){
var txt = $(this).html();
i++;
var content = '<li>List Item ' + i + '</li>';
if (txt == 'append()') {
$('ol').append(content); // 자식 요소로써 뒤에 붙는다.
}
if (txt == 'prepend()') {
$('ol').prepend(content); // 자식 요소로써 앞에 붙는다.
}
if (txt == 'after()') {
$('ol').after(content); // 형제 요소로써 뒤에 붙는다.
}
if (txt == 'before()') {
$('ol').before(content); // 형제 요소로써 앞에 붙는다.
}
});
</script>
</html>
2. 요소 삭제
| $(...).remove() | 선택한 요소와 하위 요소도 모두 삭제 |
| $(...).empty() | 선택한 요소의 하위 요소만 삭제 (비워냄) |
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
div.paren{
background-color: yellow;
width: 400px;
height: 180px;
text-align: center;
}
div.paren div{
background-color: green;
width: 300px;
height: 50px;
margin: 20px auto;
color: white;
font-weight: 600;
line-height: 45px;
}
</style>
</head>
<body>
<div class="paren">
<b>Parent Element</b>
<div>child Element 1</div>
<div>child Element 2</div>
</div>
<button>remove()</button>
<button>empty()</button>
</body>
<script>
$('button').eq(0).click(function(){
$('.paren').remove();
});
$('button').eq(1).click(function(){
$('.paren').empty();
});
</script>
</html>
3. 요소 면적
<html>
<head>
<meta charset="UTF-8">
<title>J-QUERY</title>
<link rel="icon" href="../img/chrome.png">
<!--Content Delivery Network 방식-->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
img{
width: 400px;
height: 300px;
padding: 10;
border: 3px solid black;
margin: 5px;
}
</style>
</head>
<body>
<img src="../img/demension.png"/>
</body>
<script>
// width() : content
console.log($('img').width()); // 400px
// innerWidth() : content + padding
console.log($('img').innerWidth()); // 420px
// outerWidth() : content + padding + border
console.log($('img').outerWidth()); // 426px
// outerWidth(true) : content + padding + border + margin
console.log($('img').outerWidth(true)); // 436px
</script>
</html>'J-Query' 카테고리의 다른 글
| 04. Animate, Method Chainin (0) | 2024.03.24 |
|---|---|
| 03. hide & show, Fade effect, Slide (0) | 2024.03.24 |
| 02. Event 등록, GET, SET, CSS, AddClass (0) | 2024.03.24 |
| 01. J-Query의 기초 (0) | 2024.03.11 |
