초지
Jiyeon's IT note
초지
전체 방문자
오늘
어제
  • 분류 전체보기 (144)
    • JAVA (1)
    • 아두이노 (5)
    • HTML,CSS (0)
    • 데이터베이스 (0)
    • 자바 페스티벌 (29)
    • JSP (6)
    • 자바 스크립트 (15)
    • Maven Project (23)
    • jQuery (4)
    • Ajax (3)
    • 파이썬 (10)
    • 자바스프링 (9)
    • 안드로이드 (18)
    • 머신러닝 (5)
    • 라즈베리파이 (0)
    • 1차 프로젝트 (4)
    • 2차 프로젝트 (7)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
초지

Jiyeon's IT note

querySelector 실습
자바 스크립트

querySelector 실습

2022. 5. 18. 15:05

<!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>
</head>
<body>
    <h1>입력한 값을 h1태그로 출력해보기</h1>
    <input type="text" id="txt">
    <button onclick="data()">h1태그 출력</button>
    <div id="div1"></div>

    <script>
       
        let data =()=>{
            let txt = document.querySelector('#txt');
            console.log(txt.value);
            let div = document.getElementById('div1');
            div.innerHTML += '<h1>'+txt.value+'</h1>'
        }

    </script>
</body>
</html>

'자바 스크립트' 카테고리의 다른 글

Callback 함수  (0) 2022.05.18
스타일 및 이미지 실습  (0) 2022.05.18
DOM 실습  (0) 2022.05.17
DOM : Document Object Model  (0) 2022.05.17
객체(Object)  (0) 2022.05.13
    '자바 스크립트' 카테고리의 다른 글
    • Callback 함수
    • 스타일 및 이미지 실습
    • DOM 실습
    • DOM : Document Object Model
    초지
    초지

    티스토리툴바