오늘은 insertBefore(), insertAfter() 를 사용해보겠습니다.
이번 강의는 Ajax의 시작입니다.
버튼을 누르면 동적으로 웹에서 내용을 받아와 웹화면에 뿌리는것을 만들 수 있것을 만들기 위한 연습입니다.
초기 소스입니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css">
</style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() {
});
</script> </head> <body> <h1>RintIanTta</h1> <h1>RantIanTta</h1> <h1>IanKelRaucTta</h1> <h1>HaraRect</h1> <h1>VhenSiliate</h1> </body> </html> |
이제 insertBefore()와 insertAfter를 써보겠습니다.
<p>Aut</p> 내용을 insertBefore()메소드를 사용하여 <h1> 태그에 적용하라.
<p>Cre</p> 내용을 insertAfter()메소드를 사용하여 <h1> 태그에 적용하라.
결과입니다.
전체소스.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css">
</style> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function() { $("<p>Aut</p>").insertBefore("h1"); $("<p>Cre</p>").insertAfter("h1"); });
</script> </head> <body> <h1>RintIanTta</h1> <h1>RantIanTta</h1> <h1>IanKelRaucTta</h1> <h1>HaraRect</h1> <h1>VhenSiliate</h1> </body> </html> |
'Skills > Web' 카테고리의 다른 글
| JQuery Basic 15강 - append() & prepend() (0) | 2014.01.13 |
|---|---|
| JQuery Basic 14강 - before() & after() (0) | 2014.01.13 |
| JQuery Basic 12강 - each() (0) | 2014.01.13 |
| jQuery Basic 11강 - slideUp() & slideDown() (0) | 2014.01.13 |
| jQuery Basic 10강 - fadeIn() & fadeOut() & fadeTo() (0) | 2014.01.13 |
