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

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.

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

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



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.