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

 

 

동적 HTML 요소 추가하기

다음은 버튼이 클릭되면

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

 

<div id='container'></div>
<button onclick='addText()'>텍스트 추가</button>

function addText() {
  
  // 추가할 <div> 요소 생성
  const newElement = document.createElement('div');

  // <div> 요소 안에 html 요소 추가
  newElement.innerHTML = '<p>텍스트가 추가되었습니다.</p>';

  // 생성된 <div> 요소를 추가할 부모요소(container div) 선택
  const container = document.getElementById('container');

  // 생성된 <div> 요소를 기존의 container div에 자식 요소로 추가
  container.appendChild(newElement);
}

 

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

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)를 자식 요소로 추가합니다.