[JS] 자바스크립트로 html 태그 생성

html 생성하는 법 (1)

1) document.createElement()  함수 

document.createElement('p')

p 태그 생성

원하는 div 안에 p 태그 집어넣기 - appendChild

var a = document.createElement('p')

document.querySelector("#id").appendChild(a);

div 태그의 아이디를 셀렉터로 찾은 다음, appendChild 사용

- 변수에 넣어서 사용하면 간단.

생성된 p 태그에 글자 넣기

var a = document.createElement('p');
 a.innerHTML = '안녕';

---

html 생성하는 법 (2)

변수에 넣어서 html 에 쓰듯이 코딩

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

 1) insertAdjacentHTML() 사용
- 이 요소(#test)  안에 추가해달라는 뜻
- 추가해주는 문법

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

2) append()사용
- append는 안쪽 맨 밑에 추가

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

 

바꾸고 싶을 경우

 div찾아서 innerHTML = '<p></p>'