[Javascript] 동적 html 요소 추가하기

 

 

동적 HTML 요소 추가하기

다음은 버튼이 클릭되면

container div에 동적으로 div text 요소가 추가되는 예제입니다.

 

 

위 예제는 버튼이 클릭될 때마다,

id가 container인 div에 

다음의 html 요소를 동적으로 추가합니다.

<div>
	<p>텍스트가 추가되었습니다.</p>
</div>

 

 

const newElement = document.createElement('div');

추가할 <div> 요소를 생성하였습니다.

 

newElement.innerHTML = '<p>텍스트가 추가되었습니다.</p>';

위에서 생성한 <div> 요소에 텍스트가 담긴 HTML 요소를 추가합니다.

 

innerHTML 속성은

element안에 HTML 요소를 정의하거나 읽어올 수 있는 속성입니다.

innerHTML 속성에 대한 자세한 설명은 다음의 지난 포스팅을 참조하세요.

[Javascript] innerText와 innerHTML의 차이점

[Javascript] innerText와 innerHTML의 차이점

 

 

const container = document.getElementById('container');

생성한 HTML요소를 추가할 container 요소를 선택합니다.

 

container.appendChild(newElement);

container 요소에 새로 생성한 div 요소(newElement)를 자식 요소로 추가합니다.