[자바스크립트 js] 요소 노드 만들기(createElement) / 요소 노드 꾸미기(textContent, innerHTML) / 요소 노드 추가하기(prepend, append, after, before)

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이전 포스팅에서는 덮어쓰는 방법들에 대해 공유했었는데요.

[자바스크립트 js] 요소 노드 주요 프로퍼티 (innerHTML, outerHTML, textContent)

 

이번 포스팅에서는 덮어쓰기 말고,

자바스크립트에서 요소 노드를 직접 생성하여 필요한 곳에 추가하는 방법에 대해 공유하겠습니다.

노드를 생성하고 사용하는 방법에는 createElement, textContent, innerHTML, prepend, append, after, before가 있습니다.

 

 

 

 

 

  1. 요소 노드 만들기 : document.createElement('태그이름')

const first = document.createElement('li');

 

 

 

  2. 요소 노드 꾸미기 : textContent, innerHTML, …

first.textContent = '처음'; //처음이라는 글자를 담고 있는 li 태그가 만들어짐

 

 

 

  3. 요소 노드 추가하기 : NODE.prepend, append, after, before

3-1. prepend : 맨 첫번째 노드로, 파라미터로 전달한 값을 추가

const goTooktak = document.querySelector('#가자뚝딱');
goTooktak.prepend(first);

 

 

 

3-2. append : 맨 마지막 노드로, 파라미터로 전달한 값을 추가

const goTooktak = document.querySelector('#가자뚝딱');
const last = document.createElement('li);
last.textContent = '마지막';
goTooktak.append(last);

 

 

 

3-3. before : 선택한 요소 바로 앞에, 파라미터로 전달한 값을 추가

const goTooktak = document.querySelector('#가자뚝딱');
const prev = document.createElement('p');
prev.textContent = '이전';
goTooktak.before(prev);
goTooktak.before('아무거나', prev); //여러 개의 값 전달 가능.

 

 

 

3-4. after : 선택한 요소 바로 다음에, 파라미터로 전달한 값을 추가

const goTooktak = document.querySelector('#가자뚝딱');
const next = document.createElement('p');
next.textContent = '다음';
goTooktak.after(next);
goTooktak.after('아무거나', next); //여러개의 값 전달 가능.