이재호

브라우저에서 버튼 100개 만들어보기 ☑️ 본문

프론트엔드/자바스크립트

브라우저에서 버튼 100개 만들어보기 ☑️

호재이 2023. 2. 13. 11:50

DOM을 이용해서 버튼 100개를 만들어보자

index.html

<!DOCTYPE html>

<head>
    <title>100 Buttons!</title>
</head>

<body>
    <!--DO NOT TOUCH THIS FILE PLEASE!-->
    <h1>Look At All My Buttons!</h1>
    <div id="container">

    </div>
</body>

</html>

app.js

const container = document.querySelector('span')

//100개를 만들 반복문

for(let i = 0; i < 100; i++){
//버튼 태그 생성 
const btn = document.creatElement('button')
// 버튼 안에 텍스트 추가
btn.textCotent = "100개!"
// span 태그에 버튼 추가
container.appendChild(btn)
}

 

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

랜덤색깔 버튼 만들기  (0) 2023.02.13
Dom을 이용해서 포켓몬 도감 만들기  (0) 2023.02.13
querySelectorAll 을 사용해 무지개 글자를 만들어 보자 🌈  (0) 2023.02.13
구조분해할당(Destructor)란?  (0) 2023.02.10
스프레드 문법 / 전개구문  (0) 2023.02.10
'프론트엔드/자바스크립트' Related Articles more