티스토리 뷰

[개발]프로그래밍/jquery

[jqeury] append,prepend - 객체 삽입

좋은 블로그 2016. 10. 14. 07:41

1. append() ,prepend() - 역할

$(앞).append(뒤) - 뒤에 있는 것을 앞의 뒷부분에 추가


$(앞).prepend(뒤) - 뒤에 있는 것을 앞의 앞부분에 추가


2. append() - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h1').append('<h3>test3</h3>');
});
</script>
 
<body>
        <h1>test1</h1>
        <h2>test2</h2>
</body>




◈ 결과화면




◈ 결과코드


1
2
3
4
<body>
        <h1>test1<h3>test3</h3></h1>
        <h2>test2</h2>
</body>




◈ 설명


위의 예제를 사용하면 test1 문구 뒤에 붙이고자 하는 내용이 들어가 버립니다


after 함수와 비교하면 좋은 예제입니다






3. prepend() - 예제

◈ 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
 
<script>
$(document).ready(function () 
{
    $('h1').prepend('<h3>test3</h3>');
});
</script>
 
<body>
        <h1>test1</h1>
        <h2>test2</h2>
</body>




◈ 결과화면




◈ 결과코드


1
2
3
4
<body>
        <h1><h3>test3</h3>test1</h1>
        <h2>test2</h2>
</body>



◈ 설명


위의 예제를 사용하면 test1 문구 앞에 붙이고자 하는 내용이 들어가 버립니다


before 함수와 비교하면 좋은 예제입니다





'[개발]프로그래밍 > jquery' 카테고리의 다른 글

[jquery] clone - 객체 복제  (0) 2016.10.14
[jquery] after ,before - 객체 삽입  (0) 2016.10.14
[jquery] remove() , empty() - 객체 제거 및 비움  (0) 2016.10.13
[jquery] 객체 추가 - html()를 활용  (0) 2016.10.13
[jquery] html() , text() - 글자와 관련된 기능  (0) 2016.10.13
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday