[JQuery] 문서 객체 생성과 추가

Front-End/JQuery

[JQuery] 문서 객체 생성과 추가

09009 2023. 4. 4. 23:14

오직 자바스크립트만 사용하여 문서 객체를 생성하는 것은 매우 복잡한 작업이다.

하지만 jquery 라이브러리를 사용하면 문서 객체를 보다 쉽게 생성할 수 있다.

jquery 문서 객체 추가 메서드

$(객체).prependTo(대상)	객체를 대상의 앞부분에 추가
$(객체).appendTo(대상)	객체를 대상의 뒷부분에 추가
$(객체).beforeTo(대상)	객체를 대상의 앞쪽에 추가
$(객체).afterTo(대상)	객체를 대상의 뒤쪽에 추가

생성한 객체는 위와 같은 메서드를 사용하여 화면에 추가한다.

prependTo()와 appendTo() 메서드는 대상의 내부에 추가되고, beforeTo()와 afterTo() 메서드는 대상의 외부에 추가된다는것에 주의하자.

기타 jquery 문서 객체 추가 메서드

$(대상).prepend(객체)	객체를 대상의 앞부분에 추가
$(대상).append(객체)	객체를 대상의 뒷부분에 추가
$(대상).before(객체)	객체를 대상의 앞쪽에 추가
$(대상).after(객체)	객체를 대상의 뒤쪽에 추가

문서 객체 생성

- 문서 객체 생성하기

jquery 라이브러리를 사용하여 아래와 같이 문서 객체를 생성할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 문서 객체를 생성합니다.
            $('<h1>Haaland Vinicius Mbappe</h1>')
        });
    </script>
</head>
<body>
    
</body>
</html>

위 소스코드를 실행하면 아무런 결과도 출력되지 않는다.

위에서 작성하였던 jquery 문서 객체 추가 메서드 표에 있는 appendTo() 메서드를 사용하여 문서 객체를

body 태그에 추가하면 생성된 문서 객체가 화면에 표시되는 것을 확인할 수 있다.

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 문서 객체를 생성합니다.
            $('<h1>Haaland Vinicius Mbappe</h1>').appendTo('body');
        });
    </script>
</head>
<body>
    
</body>
</html>

💻 출력

- appendTo() 메서드를 사용하여 문서 객체 추가하기

위의 예시에서 확인하였듯이 appendTo() 메서드를 사용하여 문서 객체를 body 태그에 추가하면 생성된 문서 객체가 화면에 표시된다.

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 10회 반복합니다.
            for (var i = 0; i < 10; i++) {
                // 문서 객체를 생성합니다.
                $('<h1>Haaland Vinicius Mbappe + ' + i + '</h1>').css({
                    backgroundColor: 'black',
                    color: 'red'
                }).appendTo('body');
            }
        });
    </script>
</head>
<body>
    
</body>
</html>

💻 출력

- append() 메서드를 사용하여 문서 객체 추가하기

✍ 입력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
        // 이벤트를 연결합니다.
        $(document).ready(function () {
            // 10회 반복합니다.
            for (var i = 0; i < 10; i++) {
                // 문서 객체를 생성합니다.
                var $dynamic = $('<h1> Haaland Vinicius Mbappe + ' + i + '</h1>')
                                .css({
                                    backgroundColor: 'black',
                                    color: 'red'
                                });

                // 문서 객체를 추가합니다.
                $('body').append($dynamic);
            }
        });
    </script>
</head>
<body>
    
</body>
</html>

위 소스코드에서 $dynamic 형태의 변수를 사용한 것을 볼 수 있는데 일반적으로 jquery 객체를 변수에 저장할 경우

변수 앞에 식별자 $를 붙여 사용한다.

💻 출력