append와 after의 차이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
p{ background: tomato; }
</style>
</head>
<body>
<p id="user_p">jQuery는 : </p>
<script>
$("p").append("<strong>재미있다</strong>");
// document.getElementById("user_p").innerHTML
// = document.getElementById("user_p").textContent
// + "<strong>재미있다</strong>";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
<body>
<p>jQuery는 : </p>
<script>
$("p").after("<strong>재미있다.</strong>");
</script>
</body>
</html>
여기 두 다른코드가 있다. 어떤 점이 하나는 그대로 뒤에 적히고 하나는 아래 칸에 적히게 하는가?
after() 메서드는 선택한 요소의 바로 뒤에 콘텐츠를 추가하고
append() 메서드는 선택한 요소의 내부 끝에 콘텐츠를 추가하기 때문이다.
즉, after()는 선택한 요소의 형제로 콘텐츠를 추가하고, append()는 선택한 요소의 자식으로 콘텐츠를 추가한다는 차이에서 이러한 결과가 도출되었다.
wrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
div {
border:2px blue solid;
margin:2px;
padding:2px;
}
p {
background:yellow;
margin:2px;
padding:2px;
}
strong {
color:red;
}
</style>
</head>
<body>
<span>Span text</span>
<strong>what about me?</strong>
<span>Another one</span>
<script>
$("span").wrap("<div><div><p><em><b> </b></em></p></div></div>")
</script>
</body>
</html>이 코드는 태그를 여러개 안쪽에 집어넣은 모습이다. em.b태그는 텍스트를 강조하기 위해 사용되었다.
둘의 차이점이라고 한다면 em은 의미적으로 강조하는 역할을 하고, b태그는 시각적으로 강조하는 역할을 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
.box1 {
margin: 10px auto; border: 5px solid #ccc; padding: 30px; text-align: center;
}
.box2 {
margin: 10px auto; border: 10px solid #ff00ff; background-color: #ff0;
padding: 25px; text-align: left;
}
</style>
</head>
<body>
<div id = "box" class = "box1"><h1>테스트 영역입니다.</h1></div>
<input type = "button" id = "btn1" value = "red"/>
<input type = "button" id = "btn10" value = "클래스적용"/>
<script>
//btn1클릭시 color를 토마토 색으로 변경
//btn10클릭시 class box1,box2 적용되어 있으면 해제, 그렇지 않으면 box1,box2를 적용
$("#btn1").click(function(){
$('div').css("color","tomato");
})
$("#btn10").click(function(){
$("div").toggleClass('box1 box2');
})
</script>
</body>
</html>
차례대로 실행한 직후 캡쳐, red 눌렀을 때, 클래스 적용을 눌렀을 때의 화면이다.
코드를 우선 보자. 처음 red버튼 같은 경우는 div태그에 있으며 id값이 btn1이므로 id값으로 접근해 css를 입혀 토마토 색깔로 테스트 영역입니다.를 변경했다.
두번째 클래스 적용 부분이 포인트인데, toggleClass() 메서드는 클래스의 추가 및 제거를 자동으로 처리하여 요소의 상태를 변경할 수 있다. 그렇기 때문에 적용이 되지 않은 상태에서 box1, box2를 지칭하고 있어 적용해준다.
dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<style>
td{width: 100px; height: 100px; text-align:center;}
</style>
</head>
<body>
<table border="1">
<tr>
<td>1번</td> <td>2번</td> <td>3번</td>
</tr>
<tr>
<td>4번</td> <td>5번</td> <td>6번</td>
</tr>
<tr>
<td>7번</td> <td>8번</td> <td>9번</td>
</tr>
</table>
<script>
$("td:eq(4)").css('background','tomato');
$("td").eq(2).css('background','powderblue');
$("td:eq(4)").next().css('background','purple')
$("td").eq(4).prev().css('background','yellow')
$("td:eq(4)").parent().css('color','blue')
$("td:eq(4)").parent().next().css('color','red')
$("td:eq(4)").parent().prev().css('color','MediumSeaGreen')
$("td:eq(4)").parent().next().children().css('text-decoration','underline')
$("td:eq(4)").parent().next().children().eq(1).css("font-weight","bold")
</script>
</body>
</html>
사진으로 보는 것이 이해가 빠를 것이다.
첫번째는 td:eq(4)인데 01234이기에 5번에 토마토 색깔이 들어가야 한다.
두번째도 마찬가지로 012이기에 실질적인 3번에 파우더 블루 색상이 들어간다.
세번째는 next가 위치한다. 이것의 의미는 무엇일까? 원래는 5번 자리인데 next가 들어가 6번 자리에 보라색으로 적용된다.
네번째도 마찬가지로 next가 아닌 prev이기에 4->3번으로 변경되어 노란색으로 채워진다.
다섯번째는 parent()메서드가 들어가 있다. parent는 직계부모를 선택하므로, td가 아닌 tr요소에 대해 변경이 일어난다. 즉 5번째에 해당하는 칸의 행에 있는 문자들을 파란색으로 바꾼다.
여섯번째도 마찬가지지만 next이기에 2행이 아닌 3행에 적용된다.
7,8번째는 parent후 children이 왔다. children() 메서드는 선택한 요소의 모든 자식 요소를 선택합니다. 즉, 선택한 tr 요소의 자식인 td 요소들을 선택한다. 즉 모든 td요소들에 대해 밑줄을 표시한다. 8번째는 bold를 적용함으로써 굵기를 굵게한다.
