[모던 웹] 15.13 문서 객체의 삽입

티스토리 뷰

HMLT&CSS&JS/study

turfrain 2014. 3. 17. 13:47

모던 웹을 위한 JavaScript jQuery 입문

test! :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 삽입 메소드 </title>
<style type="text/css">
#target1 , #target2 {
width : 100px; /**/
background-color : red; /**/
border : 2px solid red;
};
.add{
background-color : #dddddd;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">
// start
$(document).ready(function(){
$("div").attr('align' ,'center');
});
// 속성
$(window).ready(function(){
// 뒤에 기준
var $a = "<div class='add'> appendTo </div>";
var $b = "<div class='add'> prependTo </div>";
var $c = "<div class='add'> insertAfter </div>";
var $d = "<div class='add'> insertBefore </div>";
$($a).appendTo("#target1");
$($b).prependTo("#target1");
$($c).insertAfter("#target1");
$($d).insertBefore("#target1");
/* ================================================================ */
// 앞에 기준
var $aa = "<div class='add'> append </div>";
var $bb = "<div class='add'> prepend </div>";
var $cc = "<div class='add'> After </div>";
var $dd = "<div class='add'> Before </div>";
$('#target2').append($aa);
$('#target2').prepend($bb);
$('#target2').after($cc);
$('#target2').before($dd);
$(".add").css('background-color' ,'#dddddd');
});
</script>
</head>
<body>
<div id="target1"> 대상 </div>
<hr>
<div id="target2"> 대상 </div>
</body>
</html>

[모던웹]17.9 ~10 jQuery UI Effect (1) 플러그인 _ (참고사항 추가) (0)	2014.03.17
[모던웹] 17.8 jQuery Approach플러그인 (0)	2014.03.17
[모던웹] 17.7 애니메이션 지연 (0)	2014.03.17
[모던웹]17.6 애니메이션 정지 (0)	2014.03.17
[모던웹] 17.5 애니메이션 큐 (0)	2014.03.17

공지사항

최근에 올라온 글

최근에 달린 댓글