[jQuery] replaceWith(), replaceAll()

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>");
});

첫번쨰 버튼을 누르면 태그 영역을 replaceWith로 대체합니다.

$("button:last").click(function(){
	$("<p><b>replaceAll</b></p>").replaceAll("p");
});

두번째 버튼을 누르면 replaceAll로 대체합니다.

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

'JS 관련 > JQuery' 카테고리의 다른 글

티스토리툴바