제이쿼리 html 태그 추가 - jeikwoli html taegeu chuga

 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>"); // 태그 추가

     });

});

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

jQuery를 이용해 요소를 삽입하는 메소드는 before, after, prepend, append 등이 있다. 

각각의 메소드마다 요소가 삽입되는 위치가 조금씩 다르니 자신이 원하는 위치에 따라 알맞게 사용해야 한다. 

<before()을 이용해 요소 삽입하기>

$(selector).before(content)

// 이때 content에 들어갈 수 있는 값은 HTML elements, jQuery objects, DOM elements이다. 

.before()는 selector 이전에 content를 삽입하는 메소드이다. 

$("h2").before("<div>Hello</div>");

// <h2></h2> 이전에 <div>Hello</div> 삽입

<after()를 이용해 요소 삽입하기>

$(selector).after(content)

.after()는 selector 이후에 content를 삽입하는 메소드이다. 

$("h2").after("<div>Hello</div>");

// <h2></h2> 이후에 <div>Hello</div> 삽입

<prepend()를 이용해 요소 삽입하기>

$(selector).prepend(content)

.prepend()는 selector의 맨 앞 자식 요소로content를 삽입하는 메소드이다. 

$("h2").prepend("<div>Hello</div>");

// h2의 열리는 태그 바로 뒤에 <div>Hello</div> 삽입

<append()를 이용해 요소 삽입하기>

$(selector).append(content)

.append()는 selector의 맨 뒤 자식 요소로content를 삽입하는 메소드이다. 

$("h2").append("<div>Hello</div>");

// h2의 닫히는 태그 바로 앞에 <div>Hello</div> 삽입

before(), after(), prepend(), append() 사용 예시

예시1) div 요소 추가하기

before와 after와는 다르게 prepend와 append는 h2요소 내에 포함된 것을 확인할 수 있다. 

공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)