JavaScript는 Div에 데이터 추가
-
innerHTML
을 사용하여 JavaScript에서 Div에 데이터 추가 -
appendChild
를 사용하여 JavaScript에서 Div에 데이터 추가 -
insertAdjacentHTML()
을 사용하여 JavaScript의 Div에 데이터 추가 -
jQuery의
append()
를 사용하여 Div에 데이터 추가
![JavaScript는 Div에 데이터 추가](/img/JavaScript/feature-image---javascript-append-data-to-div.webp)
이 튜토리얼에서는 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>');
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn