특정 태그 뒤에 태그 추가하기

특정 태그 뒤에 태그를 추가하는 방법에 대해 알아보겠습니다.

이것을 수행하려면 after를 사용합니다.

after 사용방법

선택자.after(추가할 태그)

그럼 코드를 통해서 알아봅시다.

다음과 같이 p태그과 h4태그가 있습니다.

<p>php</p>
<h4>css3</h4>

p태그뒤에 <b>html5</b>를 추가하려면 다음의 코드를 사용합니다.

$('p').after("<b>html5</b>")

그러면 코드는 다음과 같이 변합니다.

<p>php</p>
<b>html5</b>
<h4>css3</h4>

그러면 실제 코드를 만들어 테스트 해봅시다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
    $('p').after("<b>html5</b>")
});
</script>
</head>
<body>
    <p>php</p>
    <h4>css3</h4>
</body>
</html>
after

위의 결과를 보면 p태그뒤에 우리의 의도대로 <b>html5</b>가 추가되었습니다.

같은 태그 사이에서 몇번째를 선택하려면 해당 선택자만 잘 선택해주면 됩니다.

같은 태그에서 몇번째 태그 앞에 태그 추가하기

이럴땐 다음의 강좌에서 학습한 위치 가상 선택자를 사용합니다.

CSS 셀렉터 5(선택자)

즉, 선택자 : nth-child(순서)

<p>1</p>
<p>2</p>
<p>3</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>

위의 코드에서 3 뒤에 4가 없습니다. 4를 추가하려면 다음의 코드를 사용합니다. 

$('p:nth-child(3)').after("<p>4</p>")

그럼 코드를 생성해서 결과를 확인해 봅시다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>COREASUR :: 제이쿼리 강좌</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
    $('p:nth-child(3)').after("<p>4</p>")
});
</script>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
</body>
</html>
after

결과를 보면 숫자 3뒤에 우리의 의도대로 4가 있는걸 볼 수 있습니다.