"innerHTML + =…"대 "appendChild (txtNode)"

"innerHTML + =…"대 "appendChild (txtNode)"

---

문제는 innerHTML을 사용하여 연결을 비교하고 기존 노드에 텍스트 노드를 추가하는 것입니다. 뒤에서 무슨 일이 일어나고 있습니까?

지금까지 이것에 대한 내 생각 :

• 둘 다 'ReFlow'를 일으키고 있다고 생각합니다.
• 후자 (텍스트 노드 추가)는 내가 아는 한 DOM을 완전히 다시 빌드합니다 (정답입니까? 둘 다이 작업을 수행합니까?).
• 전자는 이전에 내가 innerHTML을 수정하는 노드에 대한 하위 노드에 대한 참조를 저장하여 더 이상 '현재 DOM'/ '하위 노드의 올바른 버전'을 가리 키지 않는 것과 같은 다른 불쾌한 부작용이있는 것 같습니다. 반대로 자식을 추가 할 때 참조는 그대로 유지되는 것 같습니다. 왜 이런거야?

사람들이 나를 위해이 문제를 해결할 수 있기를 바랍니다. 감사합니다!

---

후자 ( appendChild)는 DOM 또는 대상 내의 모든 요소 / 노드를 완전히 다시 빌드 하지 않습니다 .

전자 (설정 innerHTML)는 대상 요소의 콘텐츠를 완전히 다시 빌드하므로 추가하는 경우 불필요합니다.

을 통해 추가 innerHTML += content하면 브라우저가 JavaScript 레이어에 제공 할 HTML 문자열을 작성하는 요소의 모든 노드를 통해 실행됩니다. 그런 다음 코드가 텍스트를 추가하고를 설정 innerHTML하여 브라우저가 대상의 모든 이전 노드를 삭제하고 해당 HTML을 모두 다시 구문 분석하고 새 노드를 빌드하도록합니다. 따라서 그런 의미에서 효율적이지 않을 수 있습니다. (그러나 HTML을 파싱 하는 것은 브라우저가 하는 일이며 정말 빠릅니다.)

설정 innerHTML은 실제로 보유하고있을 수있는 대상 요소 내의 요소에 대한 모든 참조를 무효화합니다. 이러한 요소는 더 이상 존재하지 않기 때문에 제거한 다음을 설정할 때 새 요소 (매우 비슷해 보이는)를 넣습니다 innerHTML.

간단히 말해서를 추가하는 경우 사용합니다 appendChild(또는 insertAdjacentHTML, 아래 참조). 교체 innerHTML하는 경우 DOM API를 통해 직접 트리를 만드는 것보다 사용 하는 것이 더 나은 옵션 인 매우 유효한 상황이 있습니다 (그 중 가장 빠른 속도).

마지막으로 insertAdjacentHTMLHTML 문자열을 사용하여 요소 내부 또는 옆에 노드와 요소를 삽입하는 데 사용할 수있는 함수 인을 언급 할 가치가 있습니다. 요소에 추가 할 수 있습니다 theElement.insertAdjacentHTML("beforeend", "the HTML goes here");. 첫 번째 인수는 HTML을 넣을 위치입니다. 선택 사항은 "beforebegin"(요소 외부, 바로 앞), "afterbegin"(요소 내부, 시작), "beforeend"(요소 내부, 끝) 및 "afterend"(요소 외부, 바로 뒤)입니다. 참고 "afterbegin"하고 "beforeend", 요소 자체에 삽입 반면 "beforebegin"및 "afterend"요소의에 삽입 부모 . 모든 주요 데스크톱 브라우저에서 지원되지만, 모바일 지원이 얼마나 좋은지 모르겠습니다 (적어도 iOS Safari 및 Android 2.x 이상이 지원한다고 확신하지만).심이 작습니다.

---

innerHTML과 appendChild 간의 성능 비교에 대한 작은 요점을 만들었습니다.

마지막 사람이 큰 차이로 승리합니다.

https://gist.github.com/oliverfernandez/5619180

참고 URL : https://stackoverflow.com/questions/2305654/innerhtml-vs-appendchildtxtnode