JS로 HTML 생성하는 방법

JS로 HTML 생성하는 방법 (1)

<div id='test'>

</div>

var a = document.createElement('p');
a.innerHTML = '안녕';
document.querySelector(#test).appendChild(a);

1. document.createElement('p') 로 p tag 를 생성해 a 변수에 저장한다
2. a.innerHTML 로 내부 html text를 변경한다
3. Selector로 원하는 부모 개체를 찾고 .appendChild(a) 로 a 변수를 자식 개체로 삽입한다

• (참고) 이 방법이 속도는 가장 빠르나 컴퓨터 성능이 좋아지며 속도의 차이가 미미해졌다

JS로 HTML 생성하는 방법 (2)

var a = '<p>안녕</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', a);

1. a 변수에 삽입하고자 하는 html text를 저장한다
2. selector로 원하는 부모 개체를 찾고 .insertAdjacentHTML('삽입위치', a) 로 a 변수를 원하는 위치에 삽입한다
   • (참고) beforeend 는 태그 내부의 맨 아래

JS로 HTML 생성하는 방법 (3)

var a = '<p>안녕</p>';
$(#test).append(a);

1. a 변수에 삽입하고자 하는 html text를 저장한다
2. jQuery 문법을 이용해 부모 개체를 선택 후 .append(a) 로 a 변수를 삽입한다
   • (참고) append 이용 시 태그 내부의 맨 아래 삽입

JS로 HTML 내용 대체

var a = '<p>안녕</p>';

document.querySelector(#test).innerHTML = a;
$(#test).html(a);