본문 바로가기

Skills/Web

JQuery Basic 14강 - before() & after()

SMALL

이번에는 before() 와 after()를 사용해보도록 하겠습니다.

전에 작업한 insertBefore() & insertAfter() 와 기능은 똑같습니다.

 

바로 소스를 보시죠.

 

 

사용하는 방식만 보시면 될것 같습니다.

 

그리고 이번에는 <style>을 추가해보도록하겠습니다.

 

 

 

결과.




전체소스.

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style type="text/css">

p { color:Orange; }

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("h1").before("<p>Hara</p>");

$("h1").after("<p>Cre</p>");

});

</script>

</head>

<body>

<h1>RintIanTta</h1>

<h1>RantIanTta</h1>

<h1>IanKelRaucTta</h1>

<h1>HaraRect</h1>

<h1>VhenSiliate</h1>

</body>

</html>



LIST