prepend(),append(),before(),after()
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>요소삽입</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#txt1').html('<p>내용2</p>');
});
</script>
</head>
<body>
<div id="txt"><p>내용1</p></div>
</body>
</html>
|
위 예제는 앞에서 배운 html()메서드를 이용하여 div요소(#txt)에 새로운 p요소를 넣은 것입니다.
결과를 보면 기존의 p요소('내용1')는 사라지고 새로운 p요소('내용2')가 출력 되는 것을 알 수 있는데
이렇듯 text()나 html()메서드로 새로운 요소를 추가하려면 기존 요소들이 사라지는 문제가 있습니다.
기존 요소에 새로운 요소를 추가 하고 싶을때 사용하는 메서드가 바로
html insert(삽입) 메서드입니다.
html insert(삽입) 명령어에는 prepend(), append(), before(), after()가 있는데
이중 prepend(), append()는 선택한 요소의 자식 요소 앞이나 뒤에 삽입하는 명령어이고
before(), after()는 선택한 요소의 앞이나 뒤에 삽입하는 명령어입니다.
prepend(), append() 요소 추가
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>요소삽입</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#wrap').prepend('<p>내용0</p>'); //선택한 요소(#wrap)의 자식 요소(p) 앞에 삽입
$('#wrap').append('<p>내용2</p>'); //선택한 요소(#wrap)의 자식 요소(p) 뒤에 삽입
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
</div>
</body>
</html>
|
before(), after() 요소 추가
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#m1').before('<div><p>내용0</p></div>'); //선택한 요소(#m1) 앞에 삽입
$('#m1').after('<div><p>내용2</p></div>'); //선택한 요소(#m1) 뒤에 삽입
});
</script>
</head>
<body>
<div id="m1">
<p>내용1</p>
</div>
</body>
</html>
|
