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

특정 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);

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

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 정보는 공개되지 않습니다.