써치킴의 우당탕탕 개발 블로그

[JS Essentials][Ch2][시작하기] 반복문 For 본문

파도파도 나오는 JavaScript

[JS Essentials][Ch2][시작하기] 반복문 For

써치킴 2022. 1. 28. 03:02

index.html

<!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 defer src="./main.js"></script>
</head>
<body>
  <h1>Hello World</h1>
  <ul></ul>
</body>
</html>

main.js

// 반복문(For)
// for(시작조건; 종료조건; 변화조건) {}

const ulEl = document.querySelector('ul');

for (let i = 0; i < 10; i++) {
  const li = document.createElement('li');    // 메모리상 li 태그를 만들어서 li 변수에 연결 
  li.textContent = `list-${i + 1}`;
  li.addEventListener('click', function () {
    console.log(li.textContent);
  })
  ulEl.appendChild(li);   // ulEl의 자식 요소로 변수 li 삽입
}

출력

'파도파도 나오는 JavaScript' 카테고리의 다른 글

[JS Essentials][Ch2][시작하기] 형 변환  (0) 2022.01.28
[JS Essentials][Ch2][시작하기] 변수 유효범위  (0) 2022.01.28
[JS Essentials][Ch2][시작하기] 조건문 Switch  (0) 2022.01.28
[JS Essentials][Ch2][시작하기] 조건문 If Else  (0) 2022.01.28
[JS Essentials][Ch2][시작하기] 삼항 연산자  (0) 2022.01.28
'파도파도 나오는 JavaScript' Related Articles more
Comments