not set

jQuery 문서 객체의 생성 본문

javascript/jQuery

jQuery 문서 객체의 생성

다크곰 2012. 2. 3. 18:21
■ appendTo

$(A).appendTo(B) A를 B의 뒷부분에 추가한다. 

<!doctype html>

<html>

<head>

    <title>jquery test</title>

    <script src="http://code.jquery.com/jquery-1.7.js"></script>

</head>

<body>

<script>

    $(document).ready(function () {

        $('<h2></h2>').html('Hello World').appendTo('div');

        $('<h3>Hello jQuery</h3>').appendTo('div');

    });

</script>

<div>

    <h1>Header-0</h1>

    <h1>Header-1</h1>

    <h1>Header-2</h1>

</div>

</body>

</html>


결과

 
 

<!doctype html>

<html>

<head>

    <title>jquery test</title>

    <script src="http://code.jquery.com/jquery-1.7.js"></script>

</head>

<body>

<script>

    $(document).ready(function () {

        $('<h2></h2>').html('Hello World').appendTo('div');

        $('<h3>Hello jQuery</h3>').appendTo('div');

        //$('<img />').attr('src', 'http://images.apple.com/kr/iphone/ios/images/ios_notification.jpg').appendTo('div');
        // div 테그에 이미지 넣기

        $('<img />', {

            src     : 'http://images.apple.com/kr/iphone/ios/images/ios_notification.jpg',

            width   : '120',

            height  : '250',

        }).appendTo('div');

    });

</script>

<div>

    <h1>Header-0</h1>

    <h1>Header-1</h1>

    <h1>Header-2</h1>

</div>

</body>

</html>


 결과


결과를 보면 style tag 가 img 테그에 만들어진것을 볼 수 있다.


본문 출처 : 모던 웹을 위한 Javascript 입문 및 jQuery입문

저작자표시

'javascript > jQuery' 카테고리의 다른 글

jQuery 합성이벤트 toggle() hover()  (0) 2013.09.16
Jquery Ajax 정리  (0) 2013.08.19
jQuery html(), text()  (0) 2012.02.03
jQuery 문서 객체의 스타일  (0) 2012.02.03
jQuery 객체 클래스 속성추가(addClass), 제거(removeClass), 속성검사(attr), 제거(removeAttr(name))  (0) 2012.02.02
'javascript/jQuery' Related Articles more