[JavaScript]자바스크립트를 활용하여 HTML 요소와 CSS의 속성 및 속성 값 생성, 변경 또는 삭제 방법

자바스크립트로 HTML과 CSS가 할 수 없는 다양한 일들을 할 수 있습니다. 자바스크립트로 HTML 요소와 CSS의 속성 및 속성값을 추가, 수정, 삭제할 수 있습니다. 그런 방법들을 정리해놓은 문서입니다.

요소 생성 또는 변경 방법 정리
메서드 또는 속성	설명	예제 코드
document.createElement(tagName)	새로운 HTML 요소를 생성합니다.	var newDiv = document.createElement('div'); newDiv.textContent = '새로운 요소입니다.'; document.body.appendChild(newDiv);
innerHTML	HTML 문자열을 사용하여 요소를 생성하고 내용을 설정합니다.	var newDiv = document.createElement('div'); newDiv.innerHTML = '<p>HTML 문자열로 생성된 요소입니다.</p>'; document.body.appendChild(newDiv);
insertAdjacentHTML(position, html)	특정 위치에 HTML 문자열을 삽입합니다.	document.getElementById('targetElement').insertAdjacentHTML('afterend', '<p>HTML 문자열로 생성된 요소입니다.</p>');
요소 삭제 방법 정리
메서드 또는 속성	설명	예제 코드
parentNode.removeChild(childNode)	부모에서 자식을 제거합니다.	var parentElement = document.body; var childElement = document.getElementById("myDiv"); parentElement.removeChild(childElement);
remove()	요소를 직접 삭제합니다.	var elementToRemove = document.getElementById("myDiv"); elementToRemove.remove();
removeAttribute()	속성을 삭제합니다.	var elementToRemoveAttribute = document.getElementById("myDiv); elementToRemoveAttribute.removeAttribute();