JavaScript는 Div에 데이터 추가

1. innerHTML을 사용하여 JavaScript에서 Div에 데이터 추가
2. appendChild를 사용하여 JavaScript에서 Div에 데이터 추가
3. insertAdjacentHTML()을 사용하여 JavaScript의 Div에 데이터 추가
4. jQuery의append()를 사용하여 Div에 데이터 추가

이 튜토리얼에서는 JavaScript를 사용하여 div에 데이터를 추가하는 방법을 소개합니다.

innerHTML을 사용하여 JavaScript에서 Div에 데이터 추가

이 방법에서는 먼저getElementById,getElementByTag,querySelector등의 선택기 중 하나를 사용하여div를 선택합니다. 그런 다음 데이터를 div의innerHTML속성에 추가합니다. 이 방법에는 한 가지 단점이 있습니다. 선택한div에서 모든 기존 이벤트 리스너를 제거합니다. 또한 내부에 포함 된 모든 노드를 파괴하고 새 노드로 교체합니다. 요소에 대한 모든 참조가 손실됩니다.

var targetDiv = document.getElementById('ID');
targetDiv.innerHTML += 'data that you want to add';

appendChild를 사용하여 JavaScript에서 Div에 데이터 추가

이전 방법과 마찬가지로 먼저 선택기 중 하나를 사용하여div를 선택합니다. 그러나innerHTML대신 이전 방법에서 논의 된 문제 때문에appendChild를 사용합니다. 자식을 추가하기 전에 텍스트 노드를 만들어야합니다.

var targetDiv = document.getElementById('ID');
var content = document.createTextNode('data that you want to add');
targetDiv.appendChild(content);

insertAdjacentHTML()을 사용하여 JavaScript의 Div에 데이터 추가

두 번째 방법과 마찬가지로이 방법은 첫 번째 방법에 대한 더 나은 대안입니다. insertAdjacentHTML()은 요소를 재분석하지 않으며 내부의 기존 요소를 방해하지도 않습니다. innerHTML보다 훨씬 빠릅니다. 또한 데이터를 삽입 할 위치를 지정하는 데 도움이됩니다. 이전 방법과 마찬가지로 먼저div를 선택한 다음insertAdjacentHTML()을 사용하여 필요한 위치에 데이터를 추가합니다.

var targetDiv = document.getElementById('ID');
targetDiv.insertAdjacentHTML('afterend', 'data that you want to add');

jQuery의append()를 사용하여 Div에 데이터 추가

append 함수는 추가해야하는 콘텐츠의 입력을 받고 jQuery 구문을 사용하여 태그에서 직접 호출 할 수 있습니다. 이 메소드는innerHTML메소드의 모든 단점도 가지고 있습니다.

$('.divd').append('<p>Test</p>');