안녕하세요. 이번 시간에는 제이쿼리로 태그를 생성, 추가, 복사, 이동 또는 제거하는 방법에 대해 알아보겠습니다! 마찬가지로 순수 자바스크립트로 하는 방법도 알려드리겠습니다.
생성
우선 생성하는 방법을 알아보겠습니다. 순수 자바스크립트와 비교하면 정말 간단합니다. $안에 만들고 싶은 태그를 적어넣으면 됩니다.
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 = '';다음 시간에는 제이쿼리 이벤트에 대해 알아보겠습니다!
익명
