[JavaScript] 새로운 요소를 생성하고 텍스트 삽입하기

pick on.. 픽온..

급 피곤하다.

 

사용자가 읽을 정보는 가급적 html안에 작성하는 것이 좋다고 생각하긴 하지만

자바스크립트를 연습할겸 새로운 요소를 만드는 법을 연습하였다.

innerHTML로 생성하는 방법이 있고

createElement로 만드는 방법 두 가지 이상의 방법이 있다.

(성능 비교해보면 innerHTML이 더 좋은 것 같다. 그러나 뭔가 표준은 createElement인듯..)

 

createElement로 요소를 생성하는 방법이 좀 더 복잡하니까 먼저 알아보도록 하자.

 

일단 어디에 새로운 요소를 만들 것인지를 생각해야 한다.

┌ 이미 생성되어있는 요소 안에 넣을 것이라면 선택자로 불러와야하고

└ 아무것도 없는 body에 만들 것이라면 document를 불러와준다.

그 뒤에 .createElement('생성하고자 하는 태그명');을 뒤이어 붙여준다.

 

const title = document.createElement('h1');

여기까지가 document에 h1 태그 생성하기

근데 텍스트가 없어서 아무 것도 보이지 않는다.

 

const title = document.createElement('h1');
const message = document.createTextNode('안녕? 난 제목태그야');

만일 그렇게 생성한 요소 안에 새로운 텍스트를 입력하고 싶은 경우

createTextNode()안에 원하는 텍스트를 만들어놓는다.

 

const title = document.createElement('h1');
const message = document.createTextNode('안녕? 난 제목태그야');
title.appendChild(message);

document.body.appendChild(title);

그 뒤 생성한 요소 안에 appaendChild로 만들어둔 텍스트를 삽입한다.

그 이후 텍스트를 삽입한 요소를 body에 불러와야 하므로

예제와 같은 document.body에 appendChlid로 요소를 불러와 붙여놓는다.

 

굿!!

흠.. 이러한 일을 할 때 노드라는 개념이 필요한 것 같은데

노드가 아직 뭔지는 잘 모르겠다.

 

innerHTML를 이용하여 만든다면 다음과 같이 간단하게 코드를 짜면 된다.

  document.body.innerHTML = '<h1>나도 제목이야!</h1>';