이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌6 - jQuery - 2년 전 등록

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

조회수:
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- 무단 전재 및 재배포 금지

댓글

아직 댓글이 없습니다.