이 포스트에서는 웹 사이트에서 내부 요소를 추가하는 jQuery 코드에 대해서 서술합니다.
요소를 추가하는 방법은 추가 위치에 따라 다음과 같이 4가지로 분류할 수 있습니다.
- 형제 요소를 지정해서 해당 요소의 다음에 추가
- 형제 요소를 지정해서 해당 요소의 앞에 추가
- 부모 요소를 지정해서 해당 요소의 끝부분에 자식 요소로 추가
- 부모 요소를 지정해서 해당 요소의 첫부분에 자식 요소로 추가
위 4가지 방법에 따라 다른 메소드를 사용하는데, 다음과 같습니다.
- after 또는 insertAfter
- 선택한 요소의 바로 다음 위치에 형제 요소로 추가합니다.
사용법:$(선택요소).after(추가요소);또는$(추가요소).insertAfter(선택요소); - before 또는 insertBefore
- 선택한 요소의 바로 앞 위치에 형제 요소로 추가합니다.
사용법:$(선택요소).before(추가요소);또는$(추가요소).insertBefore(선택요소); - append 또는 appendTo
- 선택한 요소의 끝부분에 자식 요소로 추가합니다. 마지막 자식 요소에 after를 호출한 것과 결과가 같습니다.
사용법:$(선택요소).append(추가요소);또는$(추가요소).appendTo(선택요소); - prepend 또는 prependTo
- 선택한 요소의 첫부분에 자식 요소로 추가합니다. 첫 자식 요소에 before를 호출한 것과 결과가 같습니다.
사용법:$(선택요소).prepend(추가요소);또는$(추가요소).prependTo(선택요소);
추가요소에는 추가할 요소를 직접 HTML 형식으로 넣을 수도 있고, 다른 요소를 직접 선택해서 추가할 수 있습니다. 단, 추가요소를 다른 요소로 선택해서 하는 경우 선택요소의 알맞은 위치에 해당 요소가 추가됨과 동시에 기존의 해당 요소는 삭제됩니다. 즉 추가될 위치에 기존 요소가 이동하게 되는 것입니다.
샘플 페이지의 코드는 다음과 같습니다. 다음 두 코드는 실행 결과가 같습니다.
샘플 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Add element Sample 1</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var cnt = 0;
$(document).ready(function(){
// New after Foo
$("#New_after_Foo").click(function(){
$("#Foo").after("<p class=\"new\">New #" + (++cnt) + "</p>");
});
// New before Foo
$("#New_before_Foo").click(function(){
$("#Foo").before("<p class=\"new\">New #" + (++cnt) + "</p>");
});
// Append new
$("#Append_new").click(function(){
$("#Para").append("<p class=\"new\">New #" + (++cnt) + "</p>");
});
// Prepend new
$("#Prepend_new").click(function(){
$("#Para").prepend("<p class=\"new\">New #" + (++cnt) + "</p>");
});
// Foo after Bar
$("#Foo_after_Bar").click(function(){
$("#Bar").after($("#Foo"));
});
// Foo before Bar
$("#Foo_before_Bar").click(function(){
$("#Bar").before($("#Foo"));
});
// Append Foo
$("#Append_Foo").click(function(){
$("#Para").append($("#Foo"));
});
// Prepend Foo
$("#Prepend_Foo").click(function(){
$("#Para").prepend($("#Foo"));
});
// Remove all new
$("#Remove_all_added").click(function(){
$("#Para .new").remove();
cnt = 0;
});
});
</script>
</head>
<body>
<h1>jQuery Append Sample 1</h1>
<p>
<button type="button" id="New_after_Foo">New after Foo</button>
<button type="button" id="New_before_Foo">New before Foo</button>
<button type="button" id="Append_new">Append new</button>
<button type="button" id="Prepend_new">Prepend new</button><br />
<button type="button" id="Foo_after_Bar">Foo after Bar</button>
<button type="button" id="Foo_before_Bar">Foo before Bar</button>
<button type="button" id="Append_Foo">Append Foo</button>
<button type="button" id="Prepend_Foo">Prepend Foo</button><br />
<button type="button" id="Remove_all_added">Remove all added</button>
</p>
<hr />
<div id="Para">
<p id="Foo">Foo</p>
<p id="Bar">Bar</p>
</div>
</body>
</html>
샘플 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Add element Sample 2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var cnt = 0;
$(document).ready(function(){
// New after Foo
$("#New_after_Foo").click(function(){
$("<p class=\"new\">New #" + (++cnt) + "</p>").insertAfter("#Foo");
});
// New before Foo
$("#New_before_Foo").click(function(){
$("<p class=\"new\">New #" + (++cnt) + "</p>").insertBefore("#Foo");
});
// Append new
$("#Append_new").click(function(){
$("<p class=\"new\">New #" + (++cnt) + "</p>").appendTo("#Para");
});
// Prepend new
$("#Prepend_new").click(function(){
$("<p class=\"new\">New #" + (++cnt) + "</p>").prependTo("#Para");
});
// Foo after Bar
$("#Foo_after_Bar").click(function(){
$("#Foo").insertAfter("#Bar");
});
// Foo before Bar
$("#Foo_before_Bar").click(function(){
$("#Foo").insertBefore("#Bar");
});
// Append Foo
$("#Append_Foo").click(function(){
$("#Foo").appendTo("#Para");
});
// Prepend Foo
$("#Prepend_Foo").click(function(){
$("#Foo").prependTo("#Para");
});
// Remove all new
$("#Remove_all_added").click(function(){
$("p").remove(".new");
cnt = 0;
});
});
</script>
</head>
<body>
<h1>jQuery Append Sample 2</h1>
<p>
<button type="button" id="New_after_Foo">New after Foo</button>
<button type="button" id="New_before_Foo">New before Foo</button>
<button type="button" id="Append_new">Append new</button>
<button type="button" id="Prepend_new">Prepend new</button><br />
<button type="button" id="Foo_after_Bar">Foo after Bar</button>
<button type="button" id="Foo_before_Bar">Foo before Bar</button>
<button type="button" id="Append_Foo">Append Foo</button>
<button type="button" id="Prepend_Foo">Prepend Foo</button><br />
<button type="button" id="Remove_all_added">Remove all added</button>
</p>
<hr />
<div id="Para">
<p id="Foo">Foo</p>
<p id="Bar">Bar</p>
</div>
</body>
</html>
이 코드의 샘플 링크는 다음과 같습니다.
https://pjw48.net/samp/jquery_add_element_sample_1.html
https://pjw48.net/samp/jquery_add_element_sample_2.html
위 샘플 링크를 통해 들어가셔서 버튼들을 하나씩 눌러 보시면 각 메소드들의 차이를 보실 수 있습니다.