제이쿼리 .after()
제이쿼리 .after()
일치하는 요소 집합의 각 요소 뒤에 매개 변수로 지정된 콘텐츠를 삽입합니다.
.after (content [, content])
유형 : htmlString 또는 요소 또는 텍스트 또는 배열 또는 jQuery
HTML 문자열, DOM 요소, 텍스트 노드, 요소 및 텍스트 노드의 배열 또는 일치하는 요소 집합의 각 요소 뒤에 삽입 할 jQuery 개체
유형 : htmlString 또는 요소 또는 텍스트 또는 배열 또는 jQuery
하나 이상의 추가 DOM 요소, 텍스트 노드, 요소 및 텍스트 노드의 배열, HTML 문자열 또는 일치하는 요소 집합의 각 요소 뒤에 삽입 할 jQuery 개체
.after( function )
기능
유형 : 함수 ( 정수 인덱스) => htmlString , Element 또는 Text 또는 jQuery
일치하는 요소 세트의 각 요소 다음에 삽입 할 HTML 문자열, DOM 요소, 텍스트 노드 또는 jQuery 객체를 반환하는 함수입니다. 세트 내의 요소의 인덱스 위치를 인수로서받습니다. 함수 내에서 this집합의 현재 요소를 나타냅니다.
.after( function-html )
function-html
유형 : 함수 ( 정수 인덱스, 문자열 html) => htmlString , 요소 또는 텍스트 또는 jQuery
일치하는 요소 세트의 각 요소 다음에 삽입 할 HTML 문자열, DOM 요소, 텍스트 노드 또는 jQuery 객체를 반환하는 함수입니다. 세트 내의 요소의 인덱스 위치와 요소의 낡은 HTML 치를 인수로서받습니다. 함수 내에서 this집합의 현재 요소를 나타냅니다.
.after()및 .insertAfter()방법은 동일한 작업을 수행합니다. 주요 차이점은 구문과 특히 콘텐츠 및 대상의 배치에 있습니다. With를 사용하면 .after()삽입 할 내용은 메서드의 인수에서 가져옵니다 $(target).after(contentToBeInserted). 로 .insertAfter(), 다른 한편으로는, 내용이 방법을 선행하고 차례로으로 전달되는 대상, 후 삽입 .insertAfter()방법의 주장 : $(contentToBeInserted).insertAfter(target).
다음 HTML 사용 :
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
한 번에 여러 요소 뒤에 내용을 만들고 삽입 할 수 있습니다.
$( ".inner" ).after( "<p>Test</p>" );
각 내부 <div>요소는이 새로운 내용을 얻습니다.
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>
DOM의 요소를 선택하여 다른 요소 뒤에 삽입 할 수도 있습니다.
$( ".container" ).after( $( "h2" ) );
이 방법으로 선택한 요소가 DOM의 다른 위치의 단일 위치에 삽입되면 복제되지 않고 이동됩니다.
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>
중요 : 그러나 하나 이상의 대상 요소가있는 경우 마지막 요소를 제외한 각 대상에 대해 삽입 된 요소의 복제본이 만들어집니다.
함수 전달하기
Query 1.4 .after()부터 삽입 할 요소를 반환하는 함수를 전달합니다.
1
2
삼
$( "p" ).after(function() {
return "<div>" + this.className + "</div>";
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after demo</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$( "p" ).after( "<b>Hello</b>" );
</script>
</body>
</html>