HOWTO · jQuery
jQuery를 사용하여 요소 이동
이 튜토리얼은 jQuery를 사용하여 요소를 이동하는 방법을 보여줍니다.
이 튜토리얼은 다른 방법을 사용하여 jQuery에서 요소를 이동하는 방법을 보여줍니다.
jQuery에는 HTML 문서의 특정 위치에 요소를 이동하거나 삽입하는 데 사용할 수 있는 다양한 메서드가 있습니다. 이러한 메서드에는 appendTo(), prependTo(), insertBefore(), insertAfter() 및 기타 메서드가 포함됩니다.
방법에 대해 논의하고 몇 가지 예를 보여 드리겠습니다.
appendTo 및 prependTo를 사용하여 jQuery를 사용하여 요소 이동
appendTo() 및 prependTo() 메소드는 jQuery에서 요소를 다른 요소로 이동하는 데 사용됩니다.
예를 들어 div에 세 개의 단락이 포함되어 있고 div로 하나의 단락을 더 이동하려고 한다고 가정합니다. 이 경우 appendTo() 메서드는 새 단락을 세 단락 뒤의 div로 이동하고 prependTo() 메서드는 단락을 세 단락 앞의 div로 이동합니다.
두 메서드의 구문은 다음과 같습니다.
$("content").appendTo("target");
$("content").prependTo("target");
어디에:
content는 이동할 컨텐츠입니다.target은 요소가 이동할 위치입니다.
appendTo() 메서드의 예를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery appendTo</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").appendTo("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
위의 코드는 ContentDiv를 div의 다른 요소 다음에 있는 TargetDiv로 이동합니다. 출력 참조:
이제 prependTo() 메서드에 대해 동일한 예제를 구현해 보겠습니다. 예를 참조하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery prependTo</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").prependTo("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
위의 코드는 ContentDiv를 div의 다른 요소보다 먼저 TargetDiv로 이동합니다. 출력 참조:
insertBefore() 및 insertAfter()를 사용하여 jQuery를 사용하여 요소 이동
insertBefore() 및 insertAfter() 메서드는 다른 요소의 앞뒤로 요소를 이동하는 데 사용됩니다. 이러한 메서드의 구문은 다음과 같습니다.
$("content").insertBefore("target");
$("content").insertAfter("target");
어디에:
content는 이동할 컨텐츠입니다.target은 콘텐츠가 이동할 전후 위치입니다.
insertBefore() 메소드의 예를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery insertBefore</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").insertBefore("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
</body>
</html>
위의 코드는 콘텐츠 요소를 대상 요소 앞으로 이동합니다. 출력 참조:
이제 insertAfter() 메서드에 대한 예제를 시도해 보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery insertAfter</title>
<style>
#TargetDiv{
padding: 30px;
background: lightblue;
}
#ContentDiv{
padding: 30px;
margin: 40px 0;
border: 3px solid;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#ContentDiv").insertAfter("#TargetDiv");
$(this).hide();
});
});
</script>
</head>
<body>
<div id="ContentDiv">
<h1>Hello Delftstack</h1>
<p>This is delftstack.com the best site for tutorials.</p>
<button type="button">Move Element</button>
</div>
<div id="TargetDiv">
<h1>DELFTSTACK</h1>
</div>
</body>
</html>
위의 코드는 대상 뒤에 내용을 이동합니다. 출력 참조:
