우리는 이전에 노드의 내부 삽입, 외부 삽입 및 삭제 방법을 배웠습니다. 이 섹션에서는 교체 방법을 배우게 됩니다. 삭제된 요소
간단히 말하면: $()를 사용하여 노드 A를 선택하고, replacementWith 메서드를 호출한 다음, 새 콘텐츠 B(HTML 문자열, DOM 요소 또는 jQuery 객체)를 전달하여 선택한 노드 A
를 대체합니다. 간단한 예를 살펴보세요. HTML 코드
<div>
<p>첫 번째 문단</p>
<p>두 번째 문단</p>
<p>세 번째 문단</p>
< ;/div>
두 번째 문단의 노드와 내용을 교체하세요
$("p:eq(1)").replaceWith('<a style="color:red">내용을 교체하세요 두 번째 단락 </a>')
jQuery를 통해 두 번째 p 요소를 필터링하고 교체를 호출하여 교체합니다. 결과는 다음과 같습니다
<div>
<p>첫 번째 단락</p> ;
<a style="color:red">두 번째 문단의 내용을 바꿉니다</a>'
<p>세 번째 문단</p>
</div>
. replacementAll( target ) : 각 대상 요소를 집합의 일치하는 요소로 교체합니다.
.replaceAll()과 .replaceWith()는 유사한 기능을 가지고 있지만 대상과 소스는 반대입니다. 위의 HTML 구조를 사용하여 교체를 사용하여 처리합니다.
$('<a style ="color:red">두 번째 단락의 내용 바꾸기</a>').replaceAll('p:eq(1)')
요약:
replacementAll ()와 .replaceWith()는 비슷한 기능을 가지고 있습니다. 주로 타겟과 소스의 위치가 다르기 때문입니다
replacementWith()와 .replaceAll() 메소드는 노드와 관련된 모든 데이터 및 이벤트 핸들러를 삭제합니다
replacementWith() 메소드는 대부분의 다른 jQuery 메소드와 마찬가지로 jQuery 객체를 반환하므로 다른 메소드와 연결될 수 있습니다
replacementWith() 메소드에서 반환된 jQuery 객체는 교체 전 노드를 참조하며, 교체 후 노드를 참조하지 않습니다. /replaceAll 메소드
아래 예를 참조하세요.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">点击,通过replaceWith替换内容</button>
<button class="bt2">点击,通过rreplaceAll替换内容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<script type="text/javascript">
//只克隆节点
//不克隆事件
$(".bt1").click(function(){
//找到内容为第二段的p元素
//通过replaceWith删除并替换这个节点
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
})
</script>
<script type="text/javascript">
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").click(function() {
$('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
})
</script>
</body>
</html>다음 섹션
