잇뉴얼 (IT_Manual)

[JQuery] 제이쿼리를 이용한 HTML요소 추가 방법 본문

Coding/JavaScript

[JQuery] 제이쿼리를 이용한 HTML요소 추가 방법

잇뉴얼 2022. 6. 5. 14:41
728x90
반응형

[JQuery] 제이쿼리를 이용한 HTML요소 추가 방법

목표 : JQuery를 이용해 HTML을 요소를 추가
사용 코드 : $("#id이름 혹은 .class이름).append(변수명)
▶ HTML 요소 추가 방법
JQuery 작성
<head>
    <meta charset="UTF-8">
    <title>HTML 요소 추가</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function _append() {
            let html_temp = `<p>문단이 추가 되었습니다.</p>`
            $("#append_tag").append(html_temp)
        }
    </script>
</head>

Jquery를 이용하기 위해 먼저, JQuery 라이브러리 코드를 추가한 다음, <script>태그를 이용해서, JS 함수를 하나 생성해줍니다. 함수안에 새로운 변수를 생성하게되는데, 이 변수안에 HTML요소를 작성해주시면 됩니다. 주의할 점은 따옴표(')가 아닌 백틱(`)으로 감싸고 있는 점인데요. 백틱은 숫자 1 왼쪽 키보드를 보면 물결표와 함께 같이 있습니다. 그리고 '$("#id이름 혹은 .클래스 이름").append(변수명)' 을 작성해줍니다. 이 코드가 해당 id 혹은 클래스이름을 가진 태그에 HTML요소를 추가해줍니다.

HTML 코드 작성
<body>
    <button onclick="_append()">여길 눌러주세요.</button>
    <div id="append_tag">

    </div>
</body>

추가를 할 수 있는 공간을 만들어주겠습니다. <body>태그안에 <div>태그를 생성한 다음, 해당 태그에 id 속성을 추가해줍니다. 위에서 '$("#id이름 혹은 .클래스이름").append(변수명)'코드가 있었는데요. 여기에 id이름을 작성해주면 됩니다. 그리고 상단에 버튼을 하나 생성해 놓았는데요. 이 버튼은 위에서 작성한 함수를 호출하기 위해 만들어놓은 버튼입니다.

 

반응형

'Coding > JavaScript' 카테고리의 다른 글

[JQuery] HTML 요소 숨기기 / 보여주기 (hide, show)  (0) 2022.06.03
[JQuery] 제이쿼리 임포트 & 사용방법  (0) 2022.06.03
[JavaScript] 자바스크립트 경고창 띄우기  (0) 2022.06.03
[JavaScript] 자바스크립트 배열 (Array)  (0) 2022.06.01
[JavaScript] 자바스크립트 클래스와 객체  (0) 2022.06.01
'Coding/JavaScript' Related Articles more
Comments