|
종류
|
사용법
|
설명
|
|
before( ) /
insertBefore( )
|
$("요소선택").before("새요소");
$("새요소").insertBefore("요소선택");
|
선택한 요소 이전 위치에
새 요소를 추가합니다.
|
|
after( ) /
insertAfter( )
|
$("요소선택").after("새요소");
$("새요소").insertAfter("요소선택");
|
선택한 요소 다음 위치에 새 요소를 추가합니다.
|
|
prepend( ) /
prependTo( )
|
$("요소선택").prepend("새요소");
$("새요소").prependTo("요소선택");
|
선택한 요소의 맨 앞 위치에 새 요소를 추가합니다.
|
|
append( ) / appendTo( )
|
$("요소선택").append("새요소");
$("새요소").appendTo("요소선택");
|
선택한 요소의 마지막 위치에 새 요소를 추가합니다.
|
|
clone( )
|
$("요소선택").clone(true or false);
|
선택한 문서 객체를 복제합니다. 이때 인자값이 true일 경우 하위 요소까지 모두 복제하고, false일 경우에는 선택한 요소만 복제합니다.
|
|
empty( )
|
$("요소선택").empty( );
|
선택한 요소의 하위 내용들을 모두 삭제합니다.
|
|
remove( )
|
$("요소선택").remove( );
|
선택한 요소를 삭제합니다.
|
|
replaceWith( ) /
replaceAll( ) /
|
$("요소선택").replaceWith("새요소");
$("새요소").replaceAll("요소선택");
|
선택한 요소들을 새 요소로
교체합니다.
|
|
unwrap( )
|
$("요소선택").unwrap( );
|
선택한 요소에 부모 요소를
삭제합니다.
|
|
wrap( )
|
$("요소선택").wrap(새요소);
|
선택한 요소를 새 요소로 각각
감쌉니다.
|
|
wrapAll( )
|
$("요소선택").wrapAll(새요소);
|
선택한 요소를 새 요소로
한꺼번에 감쌉니다.
|
|
wraplnner( )
|
$("요소선택").wrapInner(새요소););
|
선택한 요소 내에 내용을 새 요소로 각각 감쌉니다.
|
ㅇㅇㅇㅇㅇㄴ안녕
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#myList").before("<li>새 내용 추가1</li>");
$("#myList").after("<li>새 내용 추가2</li>");
});
</script>
</head>
<body>
<ul>
<li id="myList">내용</li>
</ul>
</body>
</html>
ㅇㅇ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#listZone").append("<li>새 내용 추가2</li>");
$("<li>새 내용 추가1</li>").prependTo("#listZone");
});
</script>
</head>
<body>
<ul id="listZone">
<li>내용</li>
</ul>
</body>
</html>
ㄷㄷ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("<li>새 내용 추가1</li>").insertBefore("#myList");
var copy_obj = $("#myList").clone();
$(copy_obj).insertAfter("#myList");
});
</script>
</head>
<body>
<ul>
<li id="myList">내용</li>
</ul>
</body>
</html>
ㄴㄴㄴ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<style type="text/css">
#line_1{
background-color: yellow;
}
#line_2{
background-color: orange;
}
</style>
<script>
$(function(){
$("#line_1").empty();
$("#line_2").remove();
});
</script>
</head>
<body>
<ul>
<li id="line_1">내용1</li>
<li id="line_2">내용2</li>
</ul>
</body>
</html>
ㄹㄹㄹ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("h2").replaceWith("<h3>replace method</h3>");
$("<h4>내용3</h4>").replaceAll("p");
});
</script>
</head>
<body>
<h2>교체 메서드</h2>
<p>내용1</p>
<p>내용2</p>
</body>
</html>
ㄷㄷㄷㄷㄷㄷ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("strong").unwrap();
$(".ct1").wrap("<div />");
$(".ct2").wrapAll("<div />");
$("li").wrapInner("<h3 />");
});
</script>
<style>
div{
background-color: aqua;
}
</style>
</head>
<body>
<h1 id="tit_1"><strong>객체 조작 및 생성</strong></h1>
<p class="ct1">내용1</p>
<p class="ct1">내용2</p>
<p class="ct2">내용3</p>
<p class="ct2">내용4</p>
<ul>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
ㅇㅇㅇㅇ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function () {
$("h1").attr("align", "left");
$("li:first").text("첫 번째 리스트");
$("h2 > strong").css("color", "red");
$("#two").prev().css("color", "blue");
$("#two").next().css("color", "purple");
$("#two").parent().css("border", "2px dashed navy");
$(".myList").prepend("<li>Front</li>");
$(".myList").append("<li>back</li>");
$("<li>앞에 삽입</li>").insertBefore(".three");
$("<li>뒤에 삽입</li>").insertAfter(".three");
$("h2").eq(1).wrap("<div/>");
$("h2:has('strong')").addClass("tit");
$("h2:last").removeClass("tit");
});
</script>
<style>
h1 {
text-align: center;
}
div {
background-color: yellow;
}
.tit {
background-color: orange;
}
</style>
</head>
<body>
<h1><strong>내용1</strong></h1>
<h2><strong>내용2</strong></h2>
<h2>내용3</h2>
<h2 class="tit">내용4</h2>
<ul class="myList">
<li>리스트1</li>
<li id="two">리스트2</li>
<li class="three">리스트3</li>
<li>리스트4</li>
</ul>
</body>
</html>
'jQuery > 기본' 카테고리의 다른 글
| input form reset function (0) | 2022.10.17 |
|---|---|
| 4. 객체 조작 - 예제 (0) | 2022.06.09 |
| 4. 객체조작 - 수치조작 메소드 (0) | 2022.06.08 |
| 4. 객체 조작 - 속성 조작 메소드 (0) | 2022.06.08 |
| step2 - 종합 (0) | 2022.06.02 |