DOM 메서드 append() 대 appendChild()

예전에

DOM의 초기 버전부터 시작하여 innerHTML 속성 또는 parentNode.appendChild() 메서드를 사용하여 웹 페이지에 새 콘텐츠를 삽입할 수 있었습니다.

페이지의 새로운 HTML 콘텐츠를 나타내는 DOMString 인 String 가 있는 경우 innerHTML 를 사용하는 것이 좋습니다. 다음과 같이 콘텐츠를 이전 버전의 HTML에 연결할 수도 있습니다.

let p = '<p class="recent">This is <em>NEW</em> content.</p>';
let div = document.getElementById('main');
div.innerHTML += p;

지금은 사용할 수 있는 DOM 메서드와 속성이 실제로 사용 중인 브라우저에 따라 달라지던 시절이었습니다. 😬 스크립트 기능을 자주 테스트하고 사용 중인 브라우저를 파악해야 했습니다.

실제로 다른 버전의 DOM이 있습니다. 버전 0, 1, 2. 이러한 차이로 인해 prototype , mootools , scriptaculous 및 jQuery 와 같은 라이브러리가 등장했습니다. 15년 전에는 모든 테스트를 건너뛰고 모든 브라우저에서 작동하는 하나의 메서드를 호출할 수 있는 라이브러리 📚가 있다는 것에 감사했습니다.

AppendChild 사용법

콘텐츠와 요소를 동적으로 생성하는 경우 개발자는 appendChild 를 사용하는 경향이 있습니다. 초기 DOM 시절부터 있었습니다.

let p = document.createElement('p');
p.innerHTML = 'This is <em>NEW</em> content.';
let div = document.getElementById('main');
div.appendChild(p);

createElement로 최상위 요소를 만든 다음 innerHTML 또는 <span>와 같은 인라인 요소가 포함된 경우를 대비하여 요소 내부의 텍스트에 <b>를 사용하여 혼합하고 일치시킬 수도 있습니다.

거의 20년 동안 이것이 우리가 바닐라 JS에서 했던 일입니다.

새로운 방법의 등장

2016년과 2018년 사이에 모든 표준 브라우저는 parentNode.append()를 포함하여 여러 가지 새로운 DOM 메서드에 대한 지원을 추가했습니다.

표면적으로는 큰 문제가 아닙니다. 이제 글자를 입력하는 시간을 절약할 수 있습니다C-h-i-l-d. 오른쪽?

진실. 하지만. 멋진 새 기능이 함께 제공됩니다.

이게 방법이야

이러한 새로운 기능은 append가 appendChild와 다른 점이며 지금 전환해야 하는 이유입니다! 🗓️

첫째, 새로운 parentNode.append() 메서드는 DOM 요소뿐만 아니라 기꺼이 DOMStrings 수락합니다.

let p = '<p class="recent">This is <em>NEW</em> content.</p>';
let div = document.getElementById('main');
div.append(p);

여전히 DOM 요소 개체를 허용하지만 DOMStrings도 처리할 수 있습니다.

둘째, 새로운parentNode.append() 메서드를 사용하면 여러 요소를 전달할 수 있습니다. 즉, append에 대한 한 번의 호출로 일련의 새로운 요소 및/또는 DOMString을 추가할 수 있으며 순서대로 추가됩니다!

//create a heading Element Node with text
let head = document.createElement('h2');
head.textContent = 'The Section Heading';
//create a paragraph DOMString
let p1 = '<p class="recent">This is <em>NEW</em> content.</p>';
//create a paragraph Element Node with an Img Element Node
let p2 = document.createElement('p');
let img = document.createElement('img');
img.src = 'http://www.example.com/image.jpg';
p2.append(img);

let div = document.getElementById('main');
//put all three into <div id="main">, in order
div.append(head, p1, p2);

캐치가 무엇입니까

항상 캐치가 있습니다. 할 수 없는 것appendChild은 무엇입니까?

한 가지만. 이전appendChild 메서드는 추가된 노드에 대한 참조를 반환했습니다. 최신append 메서드는 undefined를 반환합니다.

그게 나쁜가요? 설마. 위의 예에서 볼 수 있듯이 대부분의 경우 추가하려는 요소를 참조하는 변수가 이미 있습니다.

그리고 솔직히 말해서 appendChild를 사용해 온 20년 이상의 클라이언트 측 스크립팅에서 메서드의 반환 값을 사용한 적이 없습니다.

자, 오늘부터 시작하세요. appendChild를 사용하고 있었다면 습관을 바꾸고 대신 append를 사용하십시오.

DOM, Javascript 또는 거의 모든 웹 개발 주제에 대해 자세히 알아보려면 제가 제공하는 수백 개의 비디오 자습서를 확인하십시오.