<!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>Create a list</h1>
<script>
let ul = document.createElement('ul');
document.body.append(ul);
// ⭐ 반복문
while (true) {
let data = prompt('리스트 내용을 입력하시오'); // 내용 입력
console.log(data);
if (!data) { // false 되면 빠져나감
break; // 반복문 종료 ★
} // Boolean("") - 빈문자열은 ("") false // Boolean(null) - 취소 - null도 false
let li = document.createElement('li'); // li 만들기
li.innerHTML = data; // li 내용에 data 넣기
ul.append(li); // ul에 마지막 자식요소로 li 추가하기
}
</script>
</body>
</html>
insert.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>
</head>
<body>
<ul id="ul">
<li id="one">1</li>
<li id="two">4</li>
</ul>
<script>
let lione = document.querySelector('#one');
// ⭐ createElement 없이 바로 추가 가능
// insert Adjacent HTML ('추가 위치', '추가할 요소');
lione.insertAdjacentHTML('afterend', '<li>2</li><li>3</li>');
// 💚 ID로 바로 접근도 가능 , class는 안됨
one.insertAdjacentHTML('beforebegin', '<li>안넝</li>');
// before begin 선택한 요소 앞에 삽입
// after before 선택한 요소 첫번째 자식요소 앞에 삽입
// before end 선택한 요소 마지막 자식요소 다음에 삽입
// after end 선택한 요소 다음에 삽입
</script>
</body>
</html>
