append&appendChild+메소드 호출
// 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());
Answer 1
0
안녕하세요 🙂
append와 appendChild는 비슷한 기능을 하는 메서드이지만, 몇가지 차이점이 있습니다.
작성해주신 것과 같이 append 메서드는 텍스트 또한 동시에 추가할 수 있는데요, 다음과 같이 사용합니다.
const parent = document.getElementById("parent");
const childDiv = document.createElement("div");
parent.append(childDiv, "텍스트도 추가할 수 있습니다.");강의에서는 appendChild를 사용하려고 했는데, 잘못 작성한 것 같습니다.
아무래도 라이브 코딩이다 보니 실수가 발생했네요,,
문제가 발생하지는 않지만, 해당 부분 정확하게 다시 자막으로 달아두겠습니다! 제보 감사합니다!!
또한 이벤트 리스너에서의 함수는, 괄호를 작성해주면 함수를 실행하는 것이므로, 함수를 즉시 실행 후 함수의 반환값을 전달하고, 괄호를 작성하지 않으면 함수 자체를 전달하기 때문에 '클릭' 이벤트가 발생할 때만 함수를 실행한다는 차이점이 있습니다.
브라우져 호환성 문의
0
67
2
4-23 Promise객체 12:05 코드 질문
0
60
2
<div class="bookmark-item-add-btn"> 질문
0
58
2
랜덤이미지
0
58
2
"6. 1. (최신 버전) 자바스크립트 코딩 환경 설정"의 화면이 정상적으로 출력되지 않습니다
1
72
2
북마크바 디폴트가 "북마크 열기"로 뜹니다.
1
130
1
홈페이지 이미지 추가 방법 문의드립니다!
0
114
2
북마크 추가 버튼 활성화 오류 문의드립니다!
0
113
1
북마크바 배치 문의드립니다!
0
113
2
명언 설정하는데 위치설정 오류가 있어요!
0
143
2
4:45 부터 무한로딩되어 재생이 안됩니다ㅠ
1
105
1
BigInt Type 에 대하여
0
86
1
계속 헷갈리네요. 이게 맞나요?
1
148
2
섹션 7 - 7 프로젝트 적용하기
1
120
2
섹션7 - 7 프로젝트 적용하기
0
88
1
섹션7-4 api사용해서 명언 설정하기
0
134
2
6분 53초 질문입니당
1
119
2
왜 전부다 div태그로 만드는지 궁금합니다.
1
231
2
[수업질문] bookmark.js에서
0
128
2
최종 프로젝트 적용
0
181
2
코드샌드박스 업데이트
0
165
2
async pending상태의 promise객체
1
149
2
화면이 다릅니다.
1
176
1
extensions 질문
1
1293
1

