자바스크립트에서 요소 생성하기

DOM 노드를 만들 때 사용하는 메서드는 두 가지가 있다.

  1. document.createElement(tag)

    태그 이름을 사용하여 새로운 요소 노드를 만든다.

    let div = document.createElement('div');

  2. document.createTextNode(text)

    주어진 텍스트를 사용해 새로운 텍스트 노드를 만든다.

    let textNode = document.createTextNode('hello');

메시지 생성하기

메시지가 들어가는 div 는 세 단계로 만든다.

let div = document.createElement('div');

div.className='alert';

div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨어요.";

요소를 만들긴 했지만, 아직 이 요소는 div 라는 이름을 가진 변수에 불과하기 때문에 페이지에 나타나진 않는다.

삽입 메서드

위에서 만든 div가 페이지에 나타나게 하려면 document 어딘가에 div를 넣어줘야 한다.

요소 삽입 메서드인 append 를 사용하여 새롭게 만든 요소 노드를 페이지에 추가할 수 있다.

let div = document.createElement('div');

div.className='alert';

div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨어요.";

document.body.append(div);

body 요소 이외에서도 append를 호출해 요소를 넣을 수 있다.

노드 삽입 메서드들