JQuery append 안됨 - jQuery append andoem

append(), remove() 함수를 사용하여 태그를 추가/삭제 해보자

List() 함수가 수행되면, 다음과 같이 div_List 태그 <div></div> 사이에 <li>테스트</li>가 추가된다.

그렇다면, List() 함수가 여러번 수행될 경우는? 다음과 같은 코드가 작성될 것이다.

만일, div 태그 내부의 요소들을 삭제 후 새로 append 시켜주고 싶을 경우 remove() 함수를 사용하여 내부 요소 들을 삭제해주는 코드를 추가해준다.

$("#div_List").remove(); 는 div 태그 전체를 모두 삭제해버린다.

div 태그 전체가 아닌 내부 요소만 삭제 하기 위해서는 $("#div_List *").remove(); 다음과 같이 작성해준다.

동적으로 영역을 불러올 때

그 추가된 영역에 관한 이벤트를 함수로 등록할 경우,

불러올때마다 해당 함수를 등록해주어야 한다.

나 같은 경우는 영역에 클래스를 주어 .each()로 이벤트를 전체로 주는 방식을 사용했는데

이런 문제가 발생한 적이 있었다.

<영역>

~~~~~ <button>

~~~~~ <button>   

------------------------>  btnFunction() 등록

~~~~~ <button>

~~~~~ <button>

~~~~~ <button>

------------------------>  btnFunction() 등록

~~~~~ <button>

------------------------>  btnFunction() 등록

function btnFunction() {
  $('button').each(function() {
    $(this).on('click', function() {
      ~~~~~~~~~~~~~
    });
  });
}

나는 'button'영역에 each를 돌린거라 딱히 여러번 등록해도 별 상관이 없을 줄 알았는데,

1번째 추가된영역 --> 3번

2번째 추가된영역 --> 2번

3번째 추가된영역 --> 1번

이런 식으로 이벤트가 계속 쌓이는 문제가 발생했다.

그래서 아래와 같이 로직 전에 e.preventDefault();로 막아주고 싶었는데 작동하지 않았다.

function btnFunction() {
  $('button').each(function() {
    $(this).on('click', function(e) {
      e.preventDefault();
      
      ~~~~~~~~~~~~~
    });
    
    $(this).click(function(e) {
      e.preventDefault();
      
      ~~~~~~~~~~~~~
    });
  });
}

그래서 아래와 같이 해결

function btnFunction() {
  $('button').each(function() {
    $(this).off('click');
  });
}

- preventDefault() : 기본적으로 등록되어 있는 이벤트를 해제할 때

- off() : 개발자가 바인딩 시킨 이벤트를 해제할 때

위와 같은 차이점이 있어 에러가 있었다.

기존 요소의 내부에 추가

다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.

.append() 메소드

.append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.

$(target).append(source)

source 객체를 target 객체의 마지막에 추가한다.

아래와 같이 HTML 요소가 있을 때

<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

.append() 메소드를 이용하면, 두번째 <li> 뒤에 새로운 HTML 요소를 추가할 수 있다.

$("#list").append("<li>새로 추가된  아이템</li>");

코드 실행

.prepend() 메소드

.prepend() 메소드는 선택한 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.

$(target).prepend(source)

source 객체를 target 객체의 첫번째에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<ol id="list">
    <li>첫 번째 아이템</li>
    <li>두 번째 아이템</li>
</ol>

.append() 메소드를 이용하면, 첫번째 <li>에 앞에 새로운 HTML 요소를 추가할 수 있다.

$("#list").prepend("<li>새로 추가된  아이템</li>");

코드 실행

.appendTo() 메소드

.appendTo() 메소드는 선택한 요소를 ‘해당 요소의 마지막‘에 추가한다.
동작은 .append() 메소드와 동일하지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

$(source).appendTo(target)

source 객체를 target 객체의 마지막에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.appendTo() 메소드를 이용하면, 첫번째 <p>에 뒤에 새로운 HTML 요소를 추가할 수 있다.

$("<span>jQuery입니다.</span>").appendTo("p");

코드 실행

.prependTo() 메소드

.prependTo() 메소드는 선택한 요소를 ‘해당 요소의 첫번째‘에 추가한다.
동작은 .prepend() 메소드와 동일하지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

$(source).prependTo(target)

source 객체를 target 객체의 첫번째에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.prependTo() 메소드를 이용하면, <p>요소 앞에 새로운 HTML 요소를 추가할 수 있다.

$("<span>jQuery입니다.</span>").prependTo("p");

코드 실행

기존 요소의 외부에 추가

다음 메소드를 사용하면 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있다.

.before() 메소드

.before() 메소드는 선택한 요소의 ‘바로 앞쪽에’ 새로운 요소나 콘텐츠를 추가한다.

$(target).before(source)

source 객체를 target 객체의 바로 앞쪽에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.before() 메소드를 이용하면, <p>요소 앞에 새로운 HTML 요소를 추가할 수 있다.

var i = 0;
$("button").on("click", function() {
    $("p").before("<div>" + (++i) + "번째 문장입니다.</div>");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

.after() 메소드

.after() 메소드는 선택한 요소의 ‘바로 뒤쪽에’ 새로운 요소나 콘텐츠를 추가한다.

$(target).after(source)

source 객체를 target 객체의 바로 뒤쪽에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.after() 메소드를 이용하면, 첫번째 <p>에 뒤에 새로운 HTML 요소를 추가할 수 있다.

var i = 0;
$("button").on("click", function() {
    $("p").after("<div>" + (++i) + "번째 문장입니다.</div>");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

.insertBefore() 메소드

.insertBefore() 메소드는 선택한 요소를 ‘해당 요소의 앞에’ 추가한다.
동작은 .before() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

$(source).insertBefore(target)

source 객체를 target 객체의 바로 앞쪽에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.insertBefore() 메소드를 이용하면, <p>요소 앞에 새로운 HTML 요소를 추가할 수 있다.

var i = 0;
$("button").on("click", function() {
    $("<div>" + (++i) + "번째 문장입니다.</div>").insertBefore("p");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

.insertAfter() 메소드

.insertAfter() 메소드는 선택한 요소를 ‘해당 요소의 뒤쪽에’ 추가한다.
동작은 .after() 메소드와 같지만, 소스(source)와 타겟(target)의 위치가 서로 반대로 되어 있다.

$(source).insertAfter(target) 

source 객체를 target 객체의 바로 뒤쪽에 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.insertAfter() 메소드를 이용하면, <p>요소 뒤에 새로운 HTML 요소를 추가할 수 있다.

var i = 0;
$("button").on("click", function() {
    $("<div>" + (++i) + "번째 문장입니다.</div>").insertAfter("p");
});

이때 버튼을 클릭 할때마다 변수 i가 증가하면서 표시를 하게 된다.

코드 실행

기존 요소를 포함하는 요소의 추가

다음 메소드를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있다.

.wrap() 메소드

.wrap() 메소드는 ‘선택한 요소‘를 감싸는 새로운 요소를 추가한다.

$(function() {
    $("button").on("click", function() {
        $("p").wrap("<div class='wrap'></div>");
    });
});

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>
<p>devkuma입니다.</p>

.wrap() 메소드를 이용하면, 각각의 <p>요소를 새로운 HTML 요소로 감쌀 수 있다.

$("p").wrap("<div class='wrap'></div>");

코드 실행

.wrapAll() 메소드

.wrapAll() 메소드는 ‘선택한 모든 요소‘를 모두 한번에 감싸는 새로운 요소를 추가한다.

$(function() {
    $("button").on("click", function() {
        $("p").wrapAll("<div class='wrap'></div>");
    });
});

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>
<p>devkuma입니다.</p>

.wrapAll() 메소드를 이용하면, <p>요소를 모두 한번에 새로운 HTML 요소로 감쌀 수 있다.

$("p").wrapAll("<div class='wrap'></div>");

코드 실행

.wrapInner() 메소드

.wrapInner() 메소드는 ‘선택한 요소 안`을 감싸는 새로운 요소를 추가한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요. devkuma입니다.</p>

.wrapInner() 메소드를 이용하면, <p>요소의 안을 새로운 HTML 요소로 감쌀 수 있다.

$("p").wrapInner("<div class='wrap'></div>");

코드 실행

기존 요소의 내부 변경

다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 반환하거나 설정할 수 있다.

.html() 메소드

.html() 메소드는 선택한 요소의 내용을 새로운 HTML 요소로 변경한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.html() 메소드를 이용하면, <p> 요소의 내용을 새로운 HTML 요소로 변경할 수 있다.

$("p").html("<div class='wrap'>devkuma입니다.</div>");

코드 실행

.text() 메소드

.text() 메소드는 선택한 요소의 내용을 새로운 단순 text로 변경한다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

.text() 메소드를 이용하면, <p> 요소의 내용을 새로운 text로 변경할 수 있다.

$("p").text("devkuma입니다.");

코드 실행

.html() 메소드와 .text() 메소드의 차이점

.html()는 선택한 요소의 내용에 html 태그 요소가 포함되어 있으면 태그를 적용하여 표시를 하지만, .text()인 경우는 html 태그를 적용하지 문장 그대로 표시를 하게 된다.

아래와 같이 HTML 요소가 있을 때,

<p>안녕하세요.</p>

아래와 같이 html를 표함한 문장을 표시를 하게 되면 html 태그를 적용하지 문장 그대로 표시한다.

$("p").text("<div class='wrap'>devkuma입니다.</div>");

코드 실행