.replaceWith()
선택한 요소를 새로운 컨텐츠로 바꿉니다.
.replaceWith()
선택한 요소를 새로운 컨텐츠로 바꿉니다.
정의
- .replaceWith("선택자") 메서드는 선택한 요소를 새로운 컨텐츠로 바꿉니다.
- .replaceWith("함수") 메서드는 선택한 요소에 함수를 설정합니다.
문법
$("선택자").replaceWith("선택자");
$("선택자").replaceWith("함수");
Sample1 
.replaceWith() 메서드를 이용하여 요소를 변경하는 예제입니다.
결과
속성(Attributes)
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$("<p class='bLine'>모두 변경되었습니다.</p>").replaceAll(".list1 li");
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$(".list1 li").replaceWith("<p class='bLine'>선택요소가 변경되었습니다.</p>");
});html
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
.bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
</style>
</head>
<body>
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice1">
<a href="#" class="off1">리셋</a>
<a href="#" class="btn1">클릭하면 리스트를 <em>.replaceAll()</em> 교체합니다.</a>
<a href="#" class="btn2">클릭하면 리스트를 <em>.replaceWith()</em> 교체합니다.</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".choice1 .off1").on("click", function(e){
e.preventDefault();
$(".list1 li").remove();
$(".list1 ul").append().html("<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li><li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li><li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li><li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>");
});
$(".choice1 .btn1").on("click", function(e){
e.preventDefault();
$("<p class='bLine'>모두 변경되었습니다.</p>").replaceAll(".list1 li");
});
$(".choice1 .btn2").on("click", function(e){
e.preventDefault();
$(".list1 li").replaceWith("<p class='bLine'>선택요소가 변경되었습니다.</p>");
});
</script>
</body>
</html>Sample2
.replaceWith() 메서드를 이용하여 요소를 변경하는 예제입니다.
결과
속성(Attributes)
- .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
- .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
- .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
- .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
리스트를 클릭하면 변경됩니다.
jquery
$(".list2 li").on("click", function(e){
e.preventDefault();
$(this).replaceWith( "<li class='rLine'>" + $(this).text() + "</li>" );
});html
<h3>속성(Attributes)</h3>
<div class="list1">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>Total
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Sample</title>
<style>
a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
.bLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
.rLine {padding: 4px 6px 2px 6px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
</style>
</head>
<body>
<h3>속성(Attributes)</h3>
<div class="list2">
<ul>
<li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
<li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
<li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
</ul>
</div>
<div class="choice2">
리스트를 클릭하면 변경됩니다.
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(".list2 li").on("click", function(e){
e.preventDefault();
$(this).replaceWith( "<li class='rLine'>" + $(this).text() + "</li>" );
});
</script>
</body>
</html>호환성(Compatibility)
| 메서드 | 버전 |  |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| replaceWith() | jQeury 1.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
| jQeury 2.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | |
| jQeury 3.x 버전 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 |
