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

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

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

before 사용방법

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

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

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

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

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

$('h4').before("<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(){
    $('h4').before("<b>html5</b>")
});
</script>
</head>
<body>
    <p>php</p>
    <h4>css3</h4>
</body>
</html>
before

위의 결과를 보면 h4태그위에 우리의 의도대로 <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>

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

$('p:nth-child(4)').before("<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(4)').before("<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>
before

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

그럼 다음시간에는 특정 태그의 뒤에 태그를 넣는 방법에 대해 알아보겠습니다.