특정 태그 앞에 태그를 추가하는 방법에 대해 알아보겠습니다.
이것을 수행하려면 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>EVERDEVEL :: 제이쿼리 강좌</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>
위의 결과를 보면 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>EVERDEVEL :: 제이쿼리 강좌</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>
결과를 보면 숫자 5앞에 우리의 의도대로 4가 있는걸 볼 수 있습니다.
그럼 다음시간에는 특정 태그의 뒤에 태그를 넣는 방법에 대해 알아보겠습니다.
봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.
댓글 0개
정렬기준
