jQuery / Reference / .insertAfter()
개요
.insertAfter()는 특정 요소 뒤에 요소를 추가하거나 이동시킵니다.
문법
.insertAfter( target )
예제 1
- h1 요소 뒤에 <p>World</p>를 추가합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
font-family: Consolas, monospace;
font-size: 16px;
}
</style>
<script src="//code.jquery.com/jquery-3.7.1.js"></script>
<script>
$( document ).ready( function() {
$( '<p>World</p>' ).insertAfter( 'h1' );
} );
</script>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
예제 2
- h1 요소 뒤로 p 요소를 이동시킵니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
body {
font-family: Consolas, monospace;
font-size: 16px;
}
</style>
<script src="//code.jquery.com/jquery-3.7.1.js"></script>
<script>
$( document ).ready( function() {
$( 'p' ).insertAfter( 'h1' );
} );
</script>
</head>
<body>
<p>World</p>
<h1>Hello</h1>
</body>
</html>
참고
- A.after( B ) : A 뒤에 B를 추가합니다.
- A.insertAfter( B ) : B 뒤에 A를 추가합니다.
- A.before( B ) : A 앞에 B를 추가합니다.
- A.insertBefore( B ) : B 앞에 A를 추가합니다.
개요 .empty()는 선택한 요소의 내용을 지웁니다. 내용만 지울 뿐 태그는 남아있다는 것에 주의합니다. 문법 .empty() 예를 들어 다음과 같은 h1 요소가 있을 때 <h1>Lorem</h1> 다음과 같이 하면 $( 'h1' ).empty() 다음처럼 바뀝니다. <h1></h1> 예제 버튼을 클릭하면 p 요소의 내용이 지워집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...
jQuery / Reference / .remove()
개요 .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 다음은 클래스 값으로 rm을 가진 p 요소를 제거합니다. $( 'p' ).remove( '.rm' ); 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...
개요 .val()은 양식(form)의 값을 가져오거나 값을 설정합니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. var jb = $( 'input#jbInput' ).val(); 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. $( 'input#jbInput' ).val( 'ABCDE' ); 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, ...
jQuery / Reference / .unwrap()
개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...
jQuery / Reference / .toggleClass()
개요 .toggleClass()로 선택한 요소에 클래스 값을 넣었다 뺐다 할 수 있습니다. 문법 .toggleClass( className ) 예를 들어 다음은 p 요소에 xyz 클래스가 없으면 추가하고, 있으면 제거합니다. $( 'p' ).toggleClass( 'xyz' ); 예제 버튼을 클릭하면 h1 요소에 ab 클래스 값이 추가되어 배경색이 생기고, 다시 버튼을 클릭하면 ab 클래스 값이 제거되어 배경색이 사라집니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .before()
개요 .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .before( content ) 예제 1 p 요소 앞에 Lorem Ipsum Dolor를 내용으로 갖는 h1 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...
jQuery / Reference / .removeClass()
개요 .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...
개요 .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 다음은 h1 요소의 하위 요소 중 span 요소를 선택합니다. $( 'h1' ).find( 'span' ) 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...
개요 .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 다음과 같이 하면 p 요소를 div로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...
개요 .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 다음은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. $( 'h1' ).has( 'span' ) 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script ...