인프런 커뮤니티 질문&답변
작성한 질문수
append&appendChild+메소드 호출
해결된 질문
작성
·
27
1
// node tree에 설정(부모-자식 관계 설정)
bookmarkItem.appendChild(bookmarkInfo);
bookmarkItem.appendChild(bookmarkDelBtn);
bookmarkInfo.appendChild(bookmarkUrl);
bookmarkUrl.appendChild(urlIcon);
bookmarkUrl.appendChild(nameElement);
urlIcon.append(urlIconImg);
bookmarkItemList.appendChild(bookmarkItem);
섹션 7의 6강 수강중에 해당 코드에 의문이 생겨서 질문 드립니다. append와 appendchild 2가지 메소드를 활용하셨는데 두 가지 차이가 검색해 봤을 땐 append는 노드뿐만 아니라 텍스트도 추가 가능하다고해서 appendchild로 바꿔봤더니 오류가 발생했습니다. 두가지 차이가 무엇인지 알 수 있을까요?
그리고 메소드 호출시 괄호가 있는 것과 없는 것의 차이가 궁금합니다. addEbentListener같은 곳에 사용되는 콜백함수에는 괄호를 안 붙여도 되는 건지 궁금합니다.
// 1번
document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle);
// 2번
document.getElementById("cancel-btn").addEventListener("click", newBookmarkToggle());
답변 1
0
효빈 Hyobin
지식공유자
안녕하세요 🙂
append와 appendChild는 비슷한 기능을 하는 메서드이지만, 몇가지 차이점이 있습니다.
작성해주신 것과 같이 append 메서드는 텍스트 또한 동시에 추가할 수 있는데요, 다음과 같이 사용합니다.
const parent = document.getElementById("parent");
const childDiv = document.createElement("div");
parent.append(childDiv, "텍스트도 추가할 수 있습니다.");강의에서는 appendChild를 사용하려고 했는데, 잘못 작성한 것 같습니다.
아무래도 라이브 코딩이다 보니 실수가 발생했네요,,
문제가 발생하지는 않지만, 해당 부분 정확하게 다시 자막으로 달아두겠습니다! 제보 감사합니다!!
또한 이벤트 리스너에서의 함수는, 괄호를 작성해주면 함수를 실행하는 것이므로, 함수를 즉시 실행 후 함수의 반환값을 전달하고, 괄호를 작성하지 않으면 함수 자체를 전달하기 때문에 '클릭' 이벤트가 발생할 때만 함수를 실행한다는 차이점이 있습니다.