생성!

 

Element: insertAdjacentHTML() 메서드 - Web API | MDN

모든 것이 재렌저링 되지 않음.

 

"beforebegin"

요소 이전에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다.

 

"afterbegin"

요소 바로 안에서 처음 자식 이전에 위치합니다.

"beforeend"

요소 바로 안에서 마지막 자식 이후에 위치합니다.

 

"afterend"

요소 이후에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다.

 

웹 브라우저가 HTML 페이지를 표시하는 과정은 크게 다음과 같습니다:

1. 파싱(Parsing): HTML 코드를 읽어 DOM 트리(문서 객체 모델)를 만듭니다.
2. 렌더링(Rendering): DOM 트리를 기반으로 화면에 실제로 요소를 그리는 과정입니다. 여기에는 요소의 크기, 위치, 색상 등을 계산하는 **레이아웃(Layout/Reflow)**과 계산된 정보를 바탕으로 픽셀을 채워넣는 **페인팅(Painting/Repaint)**이 포함됩니다.

insertAdjacentHTML()과 같은 메서드를 사용할 때 "모든 것이 재렌더링 되지 않음"의 의미는 다음과 같습니다.

• 효율적인 DOM 조작: innerHTML = '새로운 HTML'처럼 특정 요소의 innerHTML 속성을 통째로 바꾸면, 브라우저는 해당 요소의 모든 기존 자식을 제거하고, 새로운 HTML 문자열을 다시 파싱하여 새로운 DOM 노드를 만들고, 그 부분을 처음부터 다시 렌더링해야 합니다. 이 과정은 때때로 비효율적일 수 있습니다.
• 부분적인 업데이트: 반면 insertAdjacentHTML()은 이미 존재하는 요소의 특정 위치(beforebegin, afterbegin, beforeend, afterend)에 새로운 HTML 문자열을 삽입하는 방식입니다. 이는 마치 기존 DOM 트리에 새로운 나뭇가지나 잎을 덧붙이는 것과 같습니다. 브라우저는 새로 삽입된 내용과 그 주변에 영향을 받는 최소한의 부분만 레이아웃을 다시 계산하고 다시 그리면 됩니다. 전체를 다시 그릴 필요가 없습니다.

결론적으로, "모든 것이 재렌더링 되지 않음"은 insertAdjacentHTML() 메서드가 DOM을 조작할 때 불필요한 비용이 큰 전체 또는 광범위한 영역의 재계산 및 재그리기를 유발하지 않고, 필요한 부분만 효율적으로 업데이트한다는 것을 강조하는 말입니다. 이는 웹 애플리케이션의 성능 최적화에 중요한 요소입니다.

 

벗 이런식은 코드 복잡해짐. 

---

 

 

Document.createElement() - Web API | MDN

function addElement() {
  // create a new div element
  var newDiv = document.createElement("div");
  // and give it some content
  var newContent = document.createTextNode("환영합니다!");
  // add the text node to the newly created div
  newDiv.appendChild(newContent);

  // add the newly created element and its content into the DOM
  var currentDiv = document.getElementById("div1");
  document.body.insertBefore(newDiv, currentDiv);
}

append()와 appendChild()는 모두 DOM(문서 객체 모델)에 자식 노드를 추가하는 데 사용되는 메서드이지만, 중요한 차이점이 있어 어떤 상황에 더 적합한지가 달라집니다.

주요 차이점

1. 인자(Arguments):
   • appendChild(node):
     • 오직 하나의 Node 객체만 인자로 받을 수 있습니다.
     • 텍스트 문자열(DOMString)을 직접 삽입할 수 없습니다. 문자열을 삽입하려면 먼저 document.createTextNode()를 사용하여 텍스트 노드를 생성해야 합니다.
   • append(node1, node2, ..., string1, string2, ...):
     • 여러 개의 인자를 동시에 받을 수 있습니다.
     • Node 객체뿐만 아니라 **텍스트 문자열(DOMString)**도 인자로 직접 받을 수 있습니다. 문자열은 자동으로 Text 노드로 변환되어 삽입됩니다.
2. 반환 값(Return Value):
   • appendChild(): 추가된 Node 객체 자체를 반환합니다.
   • append(): undefined를 반환합니다.
3. 호환성:
   • appendChild(): 비교적 오래된 표준이며, 모든 주요 브라우저에서 광범위하게 지원됩니다.
   • append(): 비교적 최신 표준(DOM Living Standard)에 추가된 메서드로, 현대 브라우저에서는 대부분 지원되지만, 아주 오래된 브라우저에서는 지원되지 않을 수 있습니다.

언제 무엇을 사용할까?

이러한 차이점을 바탕으로 다음과 같은 경우에 선택할 수 있습니다.

appendChild()를 사용하는 경우:

• 단 하나의 Node 객체만 추가할 때: 하나의 요소를 DOM에 추가할 때 가장 기본적인 방법입니다.
• 추가된 Node 객체를 반환받아 추가적인 작업을 할 때: 예를 들어, 노드를 추가함과 동시에 그 노드에 이벤트 리스너를 붙이거나 스타일을 적용해야 할 때 유용합니다.
  JavaScript

   

  const parent = document.getElementById('parent');
  const newDiv = document.createElement('div');
  newDiv.textContent = '새로운 내용';
  
  const appendedNode = parent.appendChild(newDiv); // newDiv가 반환됨
  appendedNode.classList.add('highlight'); // 반환된 노드에 바로 작업
  

• 구형 브라우저 환경을 지원해야 할 때: 넓은 브라우저 호환성이 필요한 경우에 안전한 선택입니다.

append()를 사용하는 경우:

• 여러 개의 Node 객체나 텍스트 문자열을 동시에 추가할 때: 코드를 더 간결하게 작성할 수 있습니다.
  JavaScript

   

  const parent = document.getElementById('parent');
  const newDiv = document.createElement('div');
  newDiv.textContent = '새로운 디브';
  const newSpan = document.createElement('span');
  newSpan.textContent = '새로운 스팬';
  
  parent.append('시작 텍스트 ', newDiv, newSpan, ' 끝 텍스트');
  // <div id="parent">시작 텍스트 <div>새로운 디브</div><span>새로운 스팬</span> 끝 텍스트</div>
  

• 텍스트 노드를 명시적으로 생성하는 번거로움을 피하고 싶을 때: 문자열을 바로 삽입할 수 있어 편리합니다.
• 최신 자바스크립트 문법의 간결성을 선호할 때: 코드가 더 읽기 쉽고 짧아집니다.

결론:

현대 웹 개발 환경에서는 여러 요소를 추가하거나 텍스트를 바로 삽입하는 유연성과 간결성 때문에 **append()**가 선호되는 경향이 있습니다. 하지만 추가된 노드에 대한 즉각적인 참조가 필요하거나 구형 브라우저를 지원해야 하는 특정 상황에서는 **appendChild()**가 여전히 유용합니

---

append(), prepend(), before() 이 세 가지 메서드의 공통점은 모두 DOM(문서 객체 모델)에 새로운 노드나 텍스트를 **삽입(insert)**하는 데 사용되는 현대의(Modern) DOM 조작 메서드라는 것입니다.

구체적인 공통점은 다음과 같습니다.

1. 여러 개의 인자를 받을 수 있습니다 (다중 인자 지원):
   • append(): 부모 요소의 마지막 자식으로 여러 개의 노드나 텍스트를 추가할 수 있습니다.
   • prepend(): 부모 요소의 첫 번째 자식으로 여러 개의 노드나 텍스트를 추가할 수 있습니다.
   • before(): 대상 요소의 바로 앞에 형제 요소로 여러 개의 노드나 텍스트를 삽입할 수 있습니다.
   • 이는 appendChild()가 오직 하나의 노드만 추가할 수 있다는 점과 대비됩니다.
2. Node 객체와 DOMString(텍스트 문자열)을 모두 인자로 받을 수 있습니다:
   • 이 세 메서드는 인자로 document.createElement()로 만든 Node 객체뿐만 아니라, 일반적인 텍스트 문자열도 직접 받을 수 있습니다. 텍스트 문자열은 자동으로 Text 노드로 변환되어 삽입됩니다.
   • 이는 appendChild()가 텍스트 문자열을 직접 받을 수 없고, document.createTextNode()를 통해 텍스트 노드를 미리 생성해야 했던 것과 다릅니다.
3. 모두 undefined를 반환합니다:
   • 세 메서드 모두 작업을 수행한 후 특별한 값을 반환하지 않습니다. (이는 appendChild()가 추가된 노드를 반환하는 것과 다릅니다.)

정리하자면, 이 메서드들은 기존의 appendChild()나 insertBefore()보다 더 유연하고 간결하게 DOM에 요소를 추가할 수 있도록 설계된 현대적인 DOM 조작 API의 일부입니다. 각각 삽입되는 위치(끝, 시작, 이전)는 다르지만, 인자를 처리하는 방식과 반환 값이 동일하다는 공통점이 있습니다.

 

 

---