JS - todo list

1. adding new HTML elements from JS

⭐️ createElement()

: 지정한 tagName의 HTML 요소를 만들어 반환함.

document.createElement(tagName);

appendChild()

: 괄호 안의 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙임.

//syntax
parentElement.appendChild(childElement);

//example
const firstBox = document.querySelector("div:first-child");
const button = document.createElement("button");

firstBox.appendChild(button);

---

2. adding + saving saving data in localStorage

JSON.stringify()

: JavaScript 값이나 객체를 JSON 문자열로 변환하여 반환.
localStorage 에는 문자열 이외의 값을 저장할 수 없기 때문에 다른 타입의 값은 JSON.stringify() 함수를 사용하여 문자열 타입으로 변환 후 저장한다.

const array = ["a", "b", "c", "d"];

localStorage.setItem("string", JSON.stringify(array));

JSON.parse()

: JSON의 문자열의 구문 분석 후 JavaScript 값이나 객체를 생성함.

const getValue = localStorage.getItem("string");
parsedData = JSON.parse(getValue);

console.log(parsedData); // ["a", "b", "c", "d"]

---

+

forEach()

: 주어진 함수를 배열 안의 각각의 아이템들에 대해 실행함.

array.forEach((alphabet) => {
		console.log("This is " + alphabet);
});

// This is a
// This is b
// This is c
// This is d

---

참고

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach