jQuery를 사용하여 특정 콘텐츠 추가하기
.append() 메소드(method)를 사용하면 각 요소의 마지막 자식(last child) 항목으로 지정한 콘텐츠를 추가하고 .prepend() 메소드를 사용하면 첫 번째 자식 항목(first child) 항목으로 추가합니다.
예를 들어, 다음과 같은 HTML이 있는 경우:
<div class="container"> <div class="inner">안녕하세요.</div> <div class="inner">안녕히 계세요.</div> </div>
다음과 같은 jQuery를 사용하여 여러 각 요소에 콘텐츠를 추가할 수 있습니다:
$( ".inner" ).append( "<p>테스트</p>" );
그러면 다음과 같이 지정한 콘텐츠가 추가됩니다.
<div class="container"> <div class="inner"> 안녕하세요. <p>테스트</p> </div> <div class="inner"> 안녕히 계세요. <p>테스트</p> </div> </div>
다음과 같은 방법으로 복잡한 HTML 태그도 추가할 수 있습니다.
var html = '<blockquote class="col-sm-9">'; html += '<p class="lead">Lorem Ipsum</p>'; html += '<footer>Lorem Ipsum <cite title="Source Title">Lorem Ipsum</cite></footer>'; html += '</blockquote>' $( ".inner" ).append( html ); // Reference: stackoverflow
이 웹페이지에서 다양한 예제를 살펴볼 수 있습니다.
참고:
일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.