Javascript를 이용해 HTML에 동적으로 태그 추가

createElement( )

원하는 태그를 생성한다

사용법은 아래와 같다

let 변수이름 = document.createElement('태그');

setAttribute( )

createElement( ) 를 이용해 새롭게 만든 태그에 속성과 값을 부여한다

사용법은 아래와 같다

생성한태그변수.setAttribute('속성' , '값');

appendChild( )

속성까지 부여해준 태그를 지정된 태그의 자식 태그로 넣는다

사용법은 아래와 같다

부모태그.appendChild(생성한태그변수);

사용 예제

See the Pen Javascript를 이용해 HTML에 동적으로 태그 추가 by ludeno (@lluden) on CodePen.

 

위의 코드는 버튼을 클릭할 때 마다 새롭게 <hx>태그와 <p>태그 가 생성되는 예제이다.

HTML에 태그를 동적으로 넣는 기본적인 단계는 아래와 같다.

1. 동적으로 추가할 태그가 자식 태그로 들어갈 부모 태그의 객체를 불러와서 변수에 저장한다.

2. HTML에 새로 추가할 태그를 createElement('태그 이름')으로 만들고 변수에 저장한다.

3. 만들어진 태그에  .setAttribute('속성' , '값')  .innerHTML = '태그 사이에 들어갈 내용' 을 이용해서 태그에 원하는

   속성과 값, 태그 사이에 들어갈 내용을 부여해준다.

4. .appendChild(새로 만들어진 태그)로 부모 태그 내부에 새로 만들어진 태그를 자식변수로 넣는다.

 

아래는 예제에 사용된 Javascript 코드에서 <p>태그를 만드는 함수를 이용해 설명한 것이다.

let tagArea = document.getElementById('tagArea');

부모 태그의 객체를 가져와서 tagArea에 저장한다.

 

let new_pTag = document.createElement('p');
	
new_pTag.setAttribute('class', 'pTag');
new_pTag.innerHTML = pTagCount+". 추가된 p태그";

새롭게 만들 태그를 new_pTag에 저장하고

<p>태그 속성으로는 class 속성에 대한 값으로는 pTag를 부여했고, 태그 사이에 들어갈 값으로는

pTagCount+" .추가된p태그" 를 부여했다.

 

tagArea.appendChild(new_pTag);

마지막으로 부모 태그인 tagArea에다가 자식 태그로 new_pTag를 넣는다.