inflearn logo
강의

Course

Instructor

First Steps in JavaScript for Web Frontend

append&appendChild+메소드 호출

Resolved

136

wltngus2002800

6 asked

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());

javascript dom 메소드 괄호 node append

Answer 1

0

hyobin

안녕하세요 🙂

 

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