내부 삽입 처리와 유사하게, jQuery는 동일한 기능을 달성하기 위해 컨텐츠 대상의 위치가 다르기 때문에 insertAfter 및 insertBefore라는 두 가지 새로운 메소드를 추가했습니다
before() 및 .insertBefore(). 주요 차이점은 구문(목표의 내용 및 배치)입니다. before()의 경우 선택 표현식이 함수 앞에 있고 내용이 매개 변수로 사용되는 반면 .insertBefore()는 정반대이며 내용이 메서드 앞에 있으므로 앞에 배치됩니다. 매개변수
after() 및 .insertAfter()의 요소는 동일한 기능을 구현합니다. 주요 차이점은 구문, 특히 (삽입된) 콘텐츠 및 대상의 배치입니다.
after()의 경우 선택 표현식이 함수 앞에 있고 매개변수는 삽입할 내용입니다. .insertAfter()의 경우,
반대로 콘텐츠가 메서드 앞에 있으면 매개변수
before, after 및 insertBefore의 요소 뒤에 배치됩니다. 대상과 위치의 차이 외에도 insertAfter는 다중 매개변수 처리를 지원하지 않습니다.
참고:
insertAfter는 지정된 요소 뒤에 JQuery로 캡슐화된 요소를 삽입합니다. 뒤로 이동한 다음 JQuery 객체를 삽입합니다.
insertBefore는 지정된 요소 앞에 JQuery로 캡슐화된 요소를 삽입합니다. 요소 앞에 요소가 있으면 이전 요소를 앞으로 이동한 다음 삽입합니다.
다음으로 코드를 작성해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
</style>
</head>
<body>
<button id="bt1">insertBefore添加元素</button>
<button id="bt2">insertAfter添加元素</button>
<div class="aaron">
<p class="test1">php 中文网</p>
</div>
<div class="test2">php.cn</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
})
</script>
</body>
</html>테스트하고 차이점이 무엇인지 확인하세요
다음 섹션