기존 요소 수정하기

기존 요소를 수정할 수 있는 다양한 방법을 살펴보았습니다:

속성(attribute) 수정하기

동일한 이름을 갖는 프로퍼티를 설정함으로써 요소에 속성을 설정할 수 있습니다. 예를 들어, 다음과 같이 <img>src를 변경할 수 있습니다.
imgEl.src = "http://www.dogs.com/dog.gif";
추가적으로 다음과 같이 setAttribute 메소드를 사용할 수도 있습니다.
imgEl.setAttribute("src", "http://www.dogs.com/dog.gif");
버튼에서 disabled 속성을 삭제해 오히려 enable 되게 하는 경우처럼, 속성을 삭제하고자 한다면 removeAttribute를 이용해야 합니다.
imgEl.removeAttribute("disabled");

스타일 수정하기

속성을 변경하는 것과 비슷한 방법으로 요소의 style 프로퍼티에 접근하여 일치하는 프로퍼티로 설정함으로써 스타일을 변경할 수 있습니다. 예를 들어 다음과 같이 색깔을 변경할 수 있습니다:
headingEl.style.color = "hotpink";
붙임표(-)는 유효한 JS 프로퍼티 이름이 아니므로 여러 단어로 구성된 CSS 프로퍼티 이름을 표시할 땐 "camelCase"를 사용해야 합니다.
headingEl.style.backgroundColor = "salmon";

클래스 이름 수정하기

className 프로퍼티를 설정하면 요소에 클래스를 추가할 수 있습니다.
mainEl.className = "warning";
위와 같이 하면 기존 클래스를 오버라이드하게 되므로 클래스 목록에 추가하고자 한다면 다음처럼 해야 합니다:
mainEl.className += " warning";
요즘 브라우저에서는 classList 기능을 사용할 수 있습니다:
mainEl.classList().add("warning");

내부 HTML / 텍스트 수정하기

요소의 내용을 임의의 문자열로 구성된 HTML로 바꾸려면 innerHTML을 이용합니다.
mainEl.innerHTML = "cats are the <strong>cutest</strong>";
HTML 태그를 전달할 필요가 없으면 대신에 textContent를 사용해야 합니다.
mainEl.textContent = "cats are the cutest";
일반적으로 이러한 두 개의 프로퍼티 중 하나를 사용할 때 조심해야 합니다. 이러한 프로퍼티들은 이벤트 리스너를 제거할 수도 있기 때문입니다. (이 부분은 다음 수업에서 배우도록 하겠습니다.)

요소 새로 생성하기

완전히 새로운 요소를 생성하고 이러한 요소들을 페이지에 추가하는 데 사용할 수 있는 함수들의 집합이 존재합니다.
새로운 요소를 생성하기 위해 createElement를 사용합니다.
var imgEl = document.createElement("img");
페이지에 요소를 첨부하려면 해당 부모 요소에 대해 appendChild를 호출합니다.
document.body.appendChild(imgEl);
비슷하게, insertBefore, replaceChild, [removeChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild), [insertAdjacentHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)들도 사용할 수 있습니다.