HTML태그 추가/삭제(append, prepend, after, before,remove)

우선 메서드 들에대해서 간단하게 설명 해보겠습니다.

 

1. 부모자식관계로 추가할 경우 (append, prepend)
$(A).append(B) : 부모 A태그 가장 뒤에 B태그를 위치시킴
$(A).prepend(B) : 부모 A태그 가장 앞에 B태그를 위치시킴

$(A).appendTo(B) : A태그를 부모 B태그 가장 뒤에 위치시킴. 
$(A).prependTo(B) : A태그를 부모 B태그 가장 앞에 위치시킴.

 

appendTo 와 prependTo 의 경우 A, B 의 위치에 혼동이 생길 수 있으니

주의하여 사용하시길 바랍니다. 

2. 형제관계로 추가할 경우 (after, before)
$(A).before(B) : A객체 앞에 B를 위치시킴
$(A).after(B) : A객체 뒤에 B를 위치시킴
$(A).insertBefore(B) : A객체를 B앞에 위치시킴
$(A).insertAfter(B) : A객체를 B뒤에 위치시킴

 

<div>  '기존내용'  </div>  이렇게 태그가 있을경우

append() 는    <div>  '기존내용'  (여기에 추가)</div>

prepend() 는   <div>(여기에 추가)  '기존내용'</div>

after() 는        <div>'기존내용'</div> (여기에 추가)

before() 는      (여기에 추가) <div>'기존내용'</div> 

 

설명은 여기까지하고 바로 사용 예를 들어보겠습니다.

 

사용 예

테스트 화면

위 화면은 제가 이것저것 연습할 때 만들어 본 간단한 페이지 입니다.
오늘은 화면 우측상단의 그룹구분 버튼에 click 이벤트를 추가하고
이름 아래에 그룹구분을 위한 radio 버튼을 추가해보겠습니다.

 

<form id="form_data" name="form_data" method="POST">
    <input type="reset" id="reset" name="reset" value="초기화">
    <input type="button" id="insert" name="insert" value="등록">
    <input type="button" id="delete" name="delete" value="삭제">
    <input type="button" id="gubun" name="gubun" value="그룹구분"> 
    <div>순번 : 자동입력 <input type="hidden" id="tetseq" name="tetseq"></div>
    <div>이름 : <input type="text" id="userid" name="userid"></div>
    <div>날짜 : <input type="text" id="strdat" name="strdat"readonly></div>
    <div>내용 : <input type="text" id="contxt" name="contxt"></div>
</form>

radio 버튼을 추가할 부분의 html 코드입니다.

$(document).ready(function(){    
    $("#gubun").click(function(){gubun();});
});
 
 
function gubun(){
    var html = '<div>'
    html +='<input type="radio" name="group" value="A">A';
    html +='<input type="radio" name="group" value="B">B';
    html +='</div>'
    $("#userid").parent().after(html);
}

 

우선 스크립트 함수로 위와같은 함수를 작성합니다.

 

html 변수안에 추가하고 싶은 HTML 텍스트를 그대로 저장합니다. 

저는 radio버튼을 추가했지만 본인이 원하는 HTML코드를 입력해주시면 다양하게 활용가능하겠죠?

 

변수에 HTML택스트를 잘 저장한 다음 HTML에 써줘야겠죠??

우선 저는 after 메서드를 사용해서 형제노드로 태그를 추가해보았습니다.

 

radio태그 추가 

짠!? radio 태그가 잘 추가 되었죠?

브라우저 개발자 도구(f12)를 활용해 HTML요소가 어떻게 바뀌었는지 확인이 가능하실겁니다.

 

<form id="form_data" name="form_data" method="POST">
    <input type="reset" id="reset" name="reset" value="초기화">
    <input type="button" id="insert" name="insert" value="등록">
    <input type="button" id="delete" name="delete" value="삭제">
    <input type="button" id="gubun" name="gubun" value="그룹구분"> 
    <div>순번 : 자동입력 <input type="hidden" id="tetseq" name="tetseq"></div>
    <div><input type="radio" name="group" value="A">
            <input type="radio" name="group" value="B"></div>
    <!-- 변수에 저장했던 내용이 형제 노드로 추가되었습니다. -->
    <div>이름 : <input type="text" id="userid" name="userid"></div>
    <div>날짜 : <input type="text" id="strdat" name="strdat"readonly></div>
    <div>내용 : <input type="text" id="contxt" name="contxt"></div>
</form>

 

다음으로 after 메서드 대신에 append 메서드를 사용하면 어떻게 될까요?

HTML소스로 바로 보여드리겠습니다.

<form id="form_data" name="form_data" method="POST">
    <input type="reset" id="reset" name="reset" value="초기화">
    <input type="button" id="insert" name="insert" value="등록">
    <input type="button" id="delete" name="delete" value="삭제">
    <input type="button" id="gubun" name="gubun" value="그룹구분"> 
    <div>순번 : 자동입력 
        <input type="hidden" id="tetseq" name="tetseq">
        <div><input type="radio" name="group" value="A">
            <input type="radio" name="group" value="B"></div>
    </div>
    <!-- 선택한 요소의 자식 노드로 기존내용의 뒤에 추가되었습니다. -->
    <div>이름 : <input type="text" id="userid" name="userid"></div>
    <div>날짜 : <input type="text" id="strdat" name="strdat"readonly></div>
    <div>내용 : <input type="text" id="contxt" name="contxt"></div>
</form>