[1. 예제 설명]
- JS 에서 배열 및 <ul> <li> element 생성 및 body 에 추가하기.
- JS 에서 <select> 에 option 추가하기.
=> 기타 event 처리 - JS 에서 <textarea> 에 내용 채우기
=> 개행 처리?
[2. 예제-1]
<!-- index.html -->
<html>
<head>
<title>Tester</title>
<script src="main.js"></script>
</head>
<body>
<!-- empty -->
</body>
</html>
// main.js
// Array
const texts = ["Hi", "Hello", "Bye", "Morning", "Evening"];
window.addEventListener("DOMContentLoaded", (event) => {
console.log(event);
const myul = document.createElement("ul");
for (let i=0; i<texts.length; i++) {
const myui = document.createElement("li");
// String formatting.
myui.innerText = `${texts[i]} ${i}`;
myul.appendChild(myui);
}
document.body.appendChild(myul);
});
[2. 예제-2]
// Array
const texts = ["Hi", "Hello", "Bye", "Morning", "Evening"];
window.addEventListener("DOMContentLoaded", (event) => {
console.log(event);
const m_select = document.createElement("select");
for (let i=0; i < texts.length; i++) {
const m_option = document.createElement("option");
m_option.innerText = `${texts[i]}_${i}`;
// m_option.text = `${texts[i]}_${i}`; // 혹은 이렇게.
m_select.append(m_option);
}
for (let i=0; i < m_select.length; i++) {
console.log(m_select.options[i].value);
// 필요 시, m_select.remove(i); 를 통해 제거할 수 있다.
}
document.body.append(m_select);
// 최초 설정 값 가져오기
console.log("first option " + m_select.firstChild.value);
// 다른 옵션을 선택 한 경우.
m_select.addEventListener("change", (event) => {
console.log(event.target.value);
});
});[2. 예제-3]
// Array
const texts = ["Hi", "Hello", "Bye", "Morning", "Evening"];
window.addEventListener("DOMContentLoaded", (event) => {
const m_textarea = document.createElement("textarea");
m_textarea.style.resize = "none";
m_textarea.style.width = "200px";
m_textarea.style.height = "50px";
m_textarea.readOnly = true;
// Output
// ~~~~~~~
// Hi
// Hello
// Bye
// Morning
// Evening
// ~~~~~~~
for (let i = 0; i < texts.length; i++) {
m_textarea.textContent += texts[i];
m_textarea.textContent += "\n";
}
document.body.append(m_textarea);
});[3. 기타 설명]
- DOMContentLoaded 는 index.html 내 body 가 모두 로딩 된 상태에서 발생하는 이벤트(?)
- 따라서, main.js 의 import 위치가 index.html 에서 body 보다 먼저 오면, 필요하다.
- 그러나 main.js 의 import 위치가 body 의 가장 마지막이면 굳이 필요하지는 않다.