jQuery - 태그 삽입, 태그 넣기 tag insert

2022. 3. 10. 21:32

html의 문서가 로드가 완료가 된 후 jquery로 원하는 부분에 태그를 중간에 삽입하는 방법을 알아보자.

jquery에는 삽입하는 것도 여러 종류가 있는데, 어떤 종류가 있는지 알아보자.

동작설명	$(타겟).method(콘텐츠);	$(콘텐츠).method(타겟)
타겟 끝에 콘텐츠를 삽입	append()	appendTo()
타겟 시작 부분에 콘텐츠를 삽입	prepend()	prependTo()
타겟 뒤에 콘텐츠를 삽입	after()	insertAfter()
타겟 앞에 콘텐츠 삽입	before()	insertBefore()
타겟을 콘텐츠로 교체	replaceWith()	replaceAll()

각각 조금씩 차이가 있기 때문에 하나씩 예제를 통해서 살펴보겠다.

▶ append & appendTo 메서드

$(타깃). append(콘텐츠);
$(콘텐츠). appendTo(타깃);
→ 타깃 끝에 콘텐츠를 삽입

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
        $(document).ready(function(){
        
        	// 테스트를 하려면 둘 중 하나는 주석처리 한 후 테스트 진행.
            $('.insert').append('<h2>삽입 할 콘텐츠 내용 입니다.</h2>');
            $('<h2>삽입 할 콘텐츠 내용 입니다.</h2>').appendTo('.insert');
        });    
  </script>
</head>
<body>
    <div class="insert">
        <h1>append 테스트 입니다</h1>
    </div>
</body>
</html>

결과 화면

이렇게 append와 appendTo는 같은 동작을 한다.

($('. insert') - 타깃) 안에 삽입을 할 건데, 위치는 맨 마지막 위치에 삽입을 한다. 그래서 위 결과 화면에서

div 태그 안에 h1 태그가 있는데 이 태그보다 뒤에 있는 위치에 삽입이 된다.

명령어는 코드에서 보는 거와 같이 반대로 쓰인다.

자신의 편한 방법대로 둘 중 아무거나 선택해서 사용하면 될 듯싶다.

▶ prepend & prependTo 메서드

$(타깃). prepend(콘텐츠);
$(콘텐츠). prependTo(타깃);
→ 타깃 시작 부분에 콘텐츠를 삽입

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
        $(document).ready(function(){
            
            // 테스트를 하려면 둘 중 하나는 주석처리 한 후 테스트 진행.
            $('.insert').prepend('<p>삽입 할 콘텐츠 내용 입니다.</p>');
            $('<p>삽입 할 콘텐츠 내용 입니다.</p>').prependTo('.insert');
        });    
  </script>
</head>
<body>
    <div class="insert">
        <h1>prepend & prependTo 테스트 입니다 - 1</h1>
        <h2>prepend & prependTo 테스트 입니다 - 2</h2>
    </div>
</body>
</html>

결과 화면

이 메서드도 prepend와 prependTo는 같은 동작을 한다.

($('. insert') - 타깃) 안에 삽입을 할 건데, 위치는 맨 앞 위치에 삽입을 한다. 그래서 위 결과 화면에서

div 태그 안에 h1 h2 태그가 있는데 제일 앞에 있는 h1 태그보다 더 앞의 자리에 삽입한다.

명령어는 코드에서 보는 거와 같이 반대로 쓰이고, 사용하기 편한 데로 자신의 입맛대로 사용하면 된다.

▶ after & insertAfter 메서드

$(타깃). after(콘텐츠);
$(콘텐츠). insertAfter(타깃);
→ 타깃 뒤에 콘텐츠를 삽입

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
        $(document).ready(function(){

            // 테스트를 하려면 둘 중 하나는 주석처리 한 후 테스트 진행.
            $('.insert').after('<p>삽입 할 콘텐츠 내용 입니다.</p>');
            $('<p>삽입 할 콘텐츠 내용 입니다.</p>').insertAfter('.insert');
        });    
  </script>
</head>
<body>
    <div class="insert">
        <h1>after & insertAfter 테스트 입니다.</h1>
    </div>
</body>
</html>

결과 화면

이 메서드도 after와 insertAfter는 같은 동작을 한다.

($('. insert') - 타깃) 타깃의 바로 뒷 위치인 자리에 삽입된다.

명령어는 코드에서 보는 거와 같이 반대로 쓰이고, 사용하기 편한 데로 자신의 입맛대로 사용하면 된다.

▶ before & insertBefore 메서드

$(타깃). before(콘텐츠);
$(콘텐츠). insertBefore(타깃);
→ 타깃 앞에 콘텐츠를 삽입

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
        $(document).ready(function(){

            // 테스트를 하려면 둘 중 하나는 주석처리 한 후 테스트 진행.
            $('.insert').before('<p>삽입 할 콘텐츠 내용 입니다.</p>');
            $('<p>삽입 할 콘텐츠 내용 입니다.</p>').insertBefore('.insert');
        });    
  </script>
</head>
<body>
    <div class="insert">
        <h1>before & insertBefore 테스트 입니다.</h1>
    </div>
</body>
</html>

결과 화면

▶ replaceWith & replaceAll 메서드

$(타깃). before(콘텐츠);
$(콘텐츠). insertBefore(타깃);
→ 타깃을 콘텐츠로 바꿈

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>JS Bin</title>
  <script>
        $(document).ready(function(){

            // 테스트를 하려면 둘 중 하나는 주석처리 한 후 테스트 진행.
            $('.insert').replaceWith('<p>삽입 할 콘텐츠 내용 입니다.</p>');
            $('<p>삽입 할 콘텐츠 내용 입니다.</p>').replaceAll('.insert');
        });    
  </script>
</head>
<body>
    <div class="insert">
        <h1>replaceWith & replaceAll 테스트 입니다.</h1>
    </div>
</body>
</html>

결과 화면

결과 화면을 보면 타깃 자체가 사라지고 콘텐츠인 <p> 태그로 바뀐다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - 셀렉터(selector) 선택자 (속성을 이용하여 요소선택) (0)	2022.03.12
jQuery - 셀렉터(selector) 선택자 (기본, 계층별 요소선택) (0)	2022.03.11
jQuery - 선택자 :eq() 인덱스 사용자 지정 선택기 (0)	2022.03.07
jQuery - 키보드 키 어떤 키가 눌렸는지 확인하는 방법 (0)	2022.03.06
jQuery - 정의한 CSS 클래스 토글 이벤트 (0)	2022.03.06

열공의 기록