[jQuery] 기존 DIV 바로 뒤에 새로운 DIV 추가하기

Last Updated: 2023년 07월 17일 댓글

특정 DIV 다음에 새로운 DIV를 추가하고 원하는 클래스를 부여하고 싶은 경우가 있을 수 있습니다.  이 경우 소스를 수정할 수 있다면 좋겠지만 그렇지 않은 경우 jQuery를 사용할 수 있습니다. 여러 가지 방법을 생각해볼 수 있습니다. 우선 다음과 같은 스크립트가 있습니다.

var myClass = "thisIsMyClass";
var div = $("<div></div>").addClass(myClass);
$(this).after(div);

예를 들어, 다음과 같이 응용할 수 있습니다.

var myClass = "thisIsMyClass";
var div = $("<div>원하는 텍스트</div>").addClass(myClass);
$(".current").after(div);

jsfiddle에서 실제 작동을 확인해볼 수 있습니다. 조금 더 간결하게 다음과 같은 스크립트도 가능합니다.

$('<div>Mr. Kim</div>',{ class : 'sample'}).appendTo(".current");

또는

$("<div>Mr. Kim</div>").insertAfter(".current").addClass(myClass);

실제 작동은 여기여기에서 각각 확인해볼 수 있습니다. 위와 동일한 결과가 나옵니다.


댓글 남기기

Leave a Comment