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

이 웹페이지에서 다양한 예제를 살펴볼 수 있습니다.

참고:

• javascript를 사용하여 DIV 자동 새로 고침 구현하기
• 마우스를 아래로 스크롤할 때 컨텐츠가 슬라이드 위로 올라가는 Parallax 스크롤링 효과 만들기