[250108 수요일]
개인과제 시작~!!
그리고 맞춤형 수업 2일차~!!
호기롭게 개인과제 시작을 하면서 갑자기 막혔다...
음..이번에도 오타인가? 아닌데 이번엔 오타 없는데?
분명 콘솔에서는 값이 나왔는데..
값이 잘 가져와 지는지 확인을 위해서 간단하게 html로 붙여보는데..
안붙네? 오류가 나네? 흠..🤔
🛸 append와 appendChild 차이점!?
Open API를 활용해서 데이터를 받아와서 원하는 데이터만 추출해서 html에 붙이는 작업중에 막혔다.
처음에는 API에서 데이터를 받아오는데서 오류가 한번 났고, 그부분은 다시 확인해서 고쳤는데, 이번엔 html에 붙이는 과정에서 안붙네?
이전에 수강했던 내용을 다시 확인하면서 코드를 보니??
append를 사용했네? 같은기능 아닌가? 해서 바꿔봤더니..헐? 바로 되네?
차이점이 뭐지?
🔹 appendChild
const parent = document.getElementById("parent"); // 부모 요소 선택
const newElement = document.createElement("div"); // 새로운 div 요소 생성
parent.appendChild(newElement); // 부모 요소에 newElement를 자식으로 추가
- 단일 노드만 추가: appendChild는 오직 하나의 자식 노드만 추가.
- DOM 노드만 가능: 텍스트나 HTML 문자열을 직접 추가할 수 없다.
- 반복적인 추가 불가: 이미 DOM에 추가된 노드는 appendChild로 두 번 추가할 수 없다. 동일한 노드를 두 번 추가하려고 하면, 이미 추가된 노드는 부모로부터제거된 후 추가된다.
🔹 append
const parent = document.getElementById("parent"); // 부모 요소 선택
const newElement = document.createElement("div"); // 새로운 div 요소 생성
parent.append(newElement); // 부모 요소에 newElement를 자식으로 추가
// 텍스트도 추가 가능, 백틱을 사용한 텍스트리터럴 사용가능
parent.append("Hello, world!"); // 부모 요소에 텍스트 추가
// 여러 요소를 한번에 추가 가능
const newElement2 = document.createElement("span");
parent.append(newElement, " some text", newElement2);
- 여러 개의 인자: 여러 개의 자식 노드나 텍스트를 한 번에 추가할 수 있ek.
- 다양한 타입을 지원: 텍스트(String), DOM 노드, 다른 HTML 문자열도 추가할 수 있다.
내가 추가한 부분은 백틱으로 감싼 html이였기에 append를 사용해야 했던 것!! 차이점을 정확하게 몰라서 한참을 다른곳만 찾았다. 앞으로 많이 사용하게 될 예정이니 잘 기억해두자!!
one setp