게시글

강좌6 - jQuery - 3년 전 등록

태그 생성, 추가, 복사, 이동, 제거

조회수:
0

안녕하세요. 이번 시간에는 제이쿼리로 태그를 생성, 추가, 복사, 이동 또는 제거하는 방법에 대해 알아보겠습니다! 마찬가지로 순수 자바스크립트로 하는 방법도 알려드리겠습니다.

생성

우선 생성하는 방법을 알아보겠습니다. 순수 자바스크립트와 비교하면 정말 간단합니다. $안에 만들고 싶은 태그를 적어넣으면 됩니다.

var $div = $('<div>Hello</div>');
var div = document.createElement('div');
var text = document.createTextNode('Hello');
div.appendChild(text);

append, appendTo

위에서 만든 태그를 추가해봅시다. 맨 마지막 자식 요소로 추가됩니다. 부모.append(자식) 또는 자식.appendTo(부모)처럼 하면 됩니다.

$('#zero').append($div);
$div.appendTo($('#zero'));
document.getElementById('zero').appendChild(div);

prepend, prependTo

맨 마지막 요소로 추가하는 게 싫다면 맨 첫 요소로 추가할 수도 있습니다. 부모.prepend(자식) 또는 자식.prependTo(부모)처럼 하면 됩니다.

$('#zero').prepend($div);
$div.prependTo($('#zero'));
document.getElementById('zero').insertBefore(div, document.getElementById('zero').firstChild);

after, insertAfter

특정 태그 다음에 추가할 수도 있습니다. 부모.after(자식) 또는 자식.insertAfter(부모) 하면 됩니다. 

$('#zero').after($div);
$div.insertAfter($('#zero'));
document.getElementById('zero').parentElement.insertBefore(div, document.getElementById('zero').nextElementSibling);

before, insertBefore

특정 태그 이전에 추가하는 방법입니다. 부모.before(자식) 또는 자식.insertBefore(부모) 하면 됩니다. 

$('#zero').before($div);
$div.insertBefore($('#zero')); document.getElementById('zero').parentElement.insertBefore(div, document.getElementById('zero'));

clone

특정 태그를 복사합니다. 태그 안의 내용까지 전부 다 복사됩니다.

var $zero = $('#zero').clone(); // $zero에 복사된 태그가 담김
var zero = document.getElementById('zero').cloneNode(true);

remove, detach

특정 태그를 제거합니다. remove는 완전히 제거해버리지만, detach는 잠시 제거하는 겁니다. 변수에 저장해두었다가 나중에 appendTo로 다시 붙이면 됩니다.

var $zero = $('#zero').detach();
$('#zero').remove();
document.getElementById('zero').parentNode.removeChild(document.getElementById('zero'));

empty

태그 안의 내용을 비웁니다.

$('#zero').empty();
document.getElementById('zero').innerHTML = '';

다음 시간에는 제이쿼리 이벤트에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

3개의 댓글이 있습니다.
2달 전
wer
5달 전
1243124
6달 전
append 할 때 이미 append 되어 있으면 그리지 않고 안 되어 있을 때만 그리는 함수나 기능이 있나요? DB에서 upsert 같은 기능이 있나요?
6달 전
직접 구현하셔야 합니다