JavaScript를 사용하여 기존 HTML 요소에 HTML 콘텐츠 추가

1. InnerHTML을 사용하여 새 HTML 노드 추가의 단점
2. DOM 요소를 교체하지 않고 HTML 콘텐츠 추가하기
3. appendChild()를 사용하여 JavaScript에서 HTML 콘텐츠 추가
4. insertAdjacentHTML()을 사용하여 HTML 노드 추가

javascript를 사용하여 div 또는 다른 HTML 요소에 HTML 콘텐츠를 추가하는 것은 쉽습니다. 새 HTML 콘텐츠로 요소의 HTMLElement.innerHTML 속성을 설정할 수 있습니다. 그러나 프로세스 중에 추가된 모든 동적 속성이 지워집니다.

InnerHTML을 사용하여 새 HTML 노드 추가의 단점

• HTMLElement.innerHTML은 요소 내부의 HTML 콘텐츠를 삭제한 다음 포함된 새 HTML과 함께 다시 추가하는 방식으로 작동합니다. 본질적으로 HTML 콘텐츠를 새로 추가하는 것이 아니라 HTML 콘텐츠를 대체합니다.
• innerHTML 속성을 사용하여 DOM에 새 HTML 요소를 추가하면 모든 하위 노드도 제거한 다음 새 HTML 콘텐츠를 구문 분석하여 구축된 새 노드로 대체합니다(innerHTML 속성) 전체 HTML을 새로 렌더링합니다.
• 사이버 보안 검토를 받는 프로젝트에서 innerHTML을 사용하는 동안 코드가 거부될 수 있다는 사실은 많이 알려져 있지 않습니다. 잠재적인 보안 위험이 있을 수 있으므로 innerHTMl을 직접 사용하지 않는 것이 좋습니다(자세한 내용은 MDN 링크 참조).

DOM 요소를 교체하지 않고 HTML 콘텐츠 추가하기

기존 DOM에 HTML 코드를 추가하기 위해 이미 첨부된 동적 콘텐츠를 잃을 염려 없이 다음과 같은 자바스크립트 내장 기능을 사용할 수 있습니다.

• appendChild()
• insertAdjacentHTML()

appendChild()를 사용하여 JavaScript에서 HTML 콘텐츠 추가

appendChild()는 innerHTML과 동일한 목적을 수행합니다. 이 두 가지 방법을 모두 사용하여 노드에 HTML 콘텐츠를 추가할 수 있습니다. 두 접근 방식의 차이점은 appendChild()는 함수이고 innerHTML은 속성이라는 것입니다. appendChild()는 innerHTML 속성에 의해 수행되는 것처럼 DOM의 콘텐츠를 교체하는 대신 기존 DOM 요소에 노드를 추가합니다.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="adress">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;
addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.appendChild(i);
}

위의 코드를 사용하여 사용자의 이름과 주소를 캡처하는 양식을 만들었습니다. 주소는 일반적으로 한 줄 이상입니다. 따라서 이러한 추가 주소 라인을 캡처하기 위해 클릭하면 새 입력 필드를 추가하는 버튼을 만들었습니다. 다음은 새 입력 필드를 만드는 과정입니다.

1. Add Address Line 버튼의 클릭 이벤트에서 addAddressLine 함수를 호출합니다.
2. 함수에서 document.createElement('input') 함수를 사용하여 HTML input을 동적으로 생성합니다. i 변수에 저장된 생성된 input 요소를 반환합니다.
3. 다음으로 setAttribute() 메소드를 사용하여 생성된 input 변수에 type 및 placeholder 속성을 설정합니다.
4. 기존 div 구조에 추가할 준비가 된 input 요소가 있습니다. 따라서 div 구조를 전체적으로 반환하는 docuemnt.getElementById()를 사용하여 address div를 쿼리한 다음 JavaScript의 appendChild(i) 함수를 사용합니다.
5. appendChild(i) 함수는 i 변수가 보유하고 있는 동적으로 생성된 input 요소를 추가하고 address div 끝에 배치합니다. lineCount를 사용하여 새 입력 필드를 추가할 때마다 자리 표시자 값을 증가시킵니다.

메모

• 생성된 요소를 DOM에 추가하기 위해 새로운 방법인 append()를 사용할 수도 있습니다. javascript 메소드 append를 사용하면 DOMString(단순 문자열 텍스트)을 인수로 사용할 수 있으며 값을 반환하지 않습니다. Internet Explorer 브라우저는 최신 append() 메서드를 지원하지 않습니다.
• Internet Explorer를 포함한 모든 최신 웹 브라우저는 이전 appendChild() 기능을 지원합니다.

insertAdjacentHTML()을 사용하여 HTML 노드 추가

appendChild()와 append() 함수는 주어진 HTML 노드에 새 요소를 추가할 수 있습니다. 이 두 방법 모두 마지막 자식 뒤에 요소를 삽입합니다. 모든 시나리오에 유용하지 않을 수 있습니다. 특히 HTML 구조의 지정된 위치에 HTML 노드를 추가하려는 경우. 이러한 경우 insertAdjacentHTML() 함수를 사용할 수 있습니다. 몇 가지 매개변수, 위치 및 해당 위치의 텍스트가 필요합니다.

• Position: insertAdjacentHTML은 위치 매개변수에서 4개의 값을 지원합니다.

  • beforebegin: 요소 시작 전에 HTML 노드를 삽입합니다.
  • afterbegin: 이름에서 알 수 있듯이 이 옵션은 선택한 노드의 여는 태그 바로 뒤에 요소를 삽입하고 첫 번째 자식 앞에 배치합니다.
  • beforeend: appendChild()와 유사합니다. 이름에서 알 수 있듯이 beforend 위치는 마지막 자식 바로 뒤에 요소를 배치합니다.
  • afterend: 대상 HTML 노드 태그가 닫힌 후의 위치를 ​​나타냅니다.

• String: 문자열 형식의 HTML을 두 번째 매개변수로 삽입할 수 있습니다. 예: <div> Hello World!</div>.
  얼핏 표현하면 다음과 같다.

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>
  <!-- beforeend -->
</div>
<!-- afterend -->

JavaScript의 insertAdjacentHTML() 함수를 사용하여 appendChild()에 대해 논의한 것과 동일한 예제를 살펴보겠습니다.

<div>
    <div>User Details</div>
    <div>
        <label>Name:</label>
        <input type="text" id="name" placeholder="Name">
    </div>
    <div id="address">
        <label>Address:</label>
        <input type="text" id="contact" placeholder="Address">
    </div>
    <button id="add_address" onclick="addAddressLine()">Add Address Line</button>
</div>

var lineCount = 0;

addAddressLine = function() {
  var i = document.createElement('input');
  i.setAttribute('type', 'text');
  i.setAttribute('placeholder', 'Address Line ' + ++lineCount);
  var addressContainer = document.getElementById('adress');
  addressContainer.insertAdjacentElement('beforeend', i);
}

이 코드에서 매개변수의 beforeend 옵션을 사용하여 address div의 끝에 동적으로 생성된 입력 요소를 추가했습니다. afterend, beforebegin 및 afterbegin 매개변수와 같은 다른 속성을 사용해 볼 수 있습니다.