[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);

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

작성자 아바타

워드크래커는 전문 영한번역가로 활동하고 있으며 10년 이상 워드프레스 관련 정보를 제공하는 워드프레스 정보꾸러미 블로그를 운영하고 있다. 또한, ‘워드프레스를 사용하는 사람들’ 네이버 카페도 관리하고 있다.

댓글 남기기

Leave a Comment

카카오톡 상담 카톡 서비스 상담