[jQuery] 동적으로 태그(tag) 추가하기 (html, append)

 jQuery를 이용한 동적으로 태그를 추가하는 방법에 대해 알아보자.

 우선 간단히 설명하자면 스크립트 상에서 문자열로 만들어준 태그를 화면에 출력시켜주는 방식으로 이번 포스팅에서는 두 가지 태그 추가에 대해 알아본다.

동적 태그 함수

 1. html 함수

 2. append 함수

 위 두 가지 방식에 태그함수를 사용하여 예를 들어보면서 설명하도록 하겠다.

1 html 함수

  html 함수는 지정한 태그 내에서 존재했던 태그들을 모두 없애고 다시 새롭게 작성하는 방법을 말한다.

 예를 들어 $("#test").html("bbb"); 를 적용시켜 보도록 하자.

//적용전

<div id="test">

     aaa

</div>

// 적용후

<div id="test">

     bbb

</div>

 위와 같이 html 함수를 사용하게 되면, 해당 타겟내 태그들을 지우고 새롭게 작성하게 된다.

1 append 함수

 append 함수는 지정한 태그 내에서 존재했던 태그들을 그대로 놔둔채 태그를 추가하는 방법이다.

 예를 들어 $("#test").append("bbb"); 를 적용시켜 보도록 하자.

//적용전

<div id="test">

     aaa

</div>

// 적용후

<div id="test">

     aaabbb

</div>

 위와 같이 append 함수를 사용하게 되면, 해당 타겟내 태그를 그대로 놔둔채 추가시켜주게 된다.

 이 외에도 after, before 함수들이 있으나 자주 사용되지 않으며 보통 위 두가지 방법을 사용하니 잘 알아두면 좋을 듯 하다.

// 사용예제

$("#button").click(function() {

     $("#item").html(""); // 태그 초기화

     $("input[name=itemChk]:checked").each(function() {

          $("#item").append("<div class='col-xs-4'></div>"); // 태그 추가

     });

});

관련글 더 보기

 2018/09/06 - [jQuery] 보이기 및 숨기기 기능 (Show / Hide)

 2018/09/06 - [jQuery] 셀렉트박스 change 이벤트 사용방법

↓ 공감 을 눌러주시면 블로거에게 큰 힘이 됩니다 !