![[jQuery] replaceWith(), replaceAll()](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpE31c%2FbtrmXkqomYq%2FxnWjTQwLm4zmqbM9m4q9RK%2Fimg.jpg)
728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="resources/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button:first").click(function(){
// target.replaceWith(newContent); // -> 여기서 사용되는 뉴컨텐트는 htmlString, Element, Array, jQuery
$("p").replaceWith("<p><b>replaceWith</b></p>");
});
$("button:last").click(function(){
// newContent.replaceAll(target); // api 찾아보자
$("<p><b>replaceAll</b></p>").replaceAll("p");
});
});
</script>
</head>
<body>
<div>
<p>DOM 대체</p>
</div>
<button>바꾸기 (replaceWith)</button>
<br>
<button>바꾸기 (replaceAll)</button>
</body>
</html>
$("button:first").click(function(){
$("p").replaceWith("<p><b>replaceWith</b></p>");
});
첫번쨰 버튼을 누르면 <p>태그 영역을 <p><b>replaceWith</b></p>로 대체합니다.
$("button:last").click(function(){
$("<p><b>replaceAll</b></p>").replaceAll("p");
});
두번째 버튼을 누르면 <p><b>replaceAll</b></p>로 대체합니다.
728x90
'JS 관련 > JQuery' 카테고리의 다른 글
| [jQuery] append()와 toggleClass() (0) | 2022.02.24 |
|---|---|
| [jQuery] prepend(), append() (0) | 2022.02.23 |
| [jQuery] toggleClass(), hasClass(), removeClass(), addClass() (0) | 2022.02.21 |
| [jQuery] 메뉴 숨기기 보이기( 이펙트 메서드 활용 ) (1) | 2022.02.20 |
| [jQuery] 이펙트 메서드( animate() ) (0) | 2022.02.19 |