Web 프로그램/js, jQuery
동적 li 태그 추가 예제
Link2Me
2022. 5. 27. 09:55
자바스크립트 코드로 동적으로 태그를 추가하는 예제이다.
|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script defer src="./main.js"></script>
</head>
<body>
<h1>Hello world!</h1>
<ul></ul>
</body>
</html>
|
main.js
|
<script>
// for(시작조건;종료조건;변화조건) {}
const ulEl = document.querySelector('ul')
for(let i =0 ; i < 3; i++){
const li = document.createElement('li')
li.textContent = `list-${i+1}`
li.addEventListener('click', function () {
console.log(li.textContent)
})
ulEl.appendChild(li)
}
</script>
|
728x90