[Javascript] 노드 생성(텍스트), 추가, 변경, 삭제, 복사 총정리

 

Javascript에서 노드 생성, 텍스트 생성, 추가, 변경, 삭제, 복사하는 방법을

정리하였습니다.

 

1. 생성
   • createElement()
   • createTextNode()
2. 추가
   • before()
   • after()
   • prepend()
   • append()
   • insertAdjacentHTML()
   • insertAdjacentElement()
   • insertAdjacentText()
   • appendChild()
     • appencChild() vs appned()
   • insertBefore()
3. 변경
   • repaceWith()
   • replaceChild()
4. 삭제
   • remove()
   • removeChild()
5. 복사
   • cloneNode()

 

 

1. 생성

createElement()

let element = document.createElement(tagName);

createElement() 함수는

파라미터로 입력받은 tagName의 element를 생성하여 리턴합니다.

 

 

createTextNode()

let textNode = document.createTextNode(data);

text node를 생성하는 함수입니다.

파라미터로 전달받은 텍스트 데이터를 텍스트 노드로 변환하여

Text 노드를 리턴합니다.

 

  예제  

// <div></div> 노드 생성
let div = document.createElement('div');

// <div> 사이에 들어갈 텍스트 노드 생성
let text = document.createTextNode('안녕?');

// <div>노드에 텍스트 노드를 자식으로 추가
div.appendChild(text);

// 문서의 body에 div element 붙여넣기
document.body.append(div);

 

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

새로운 <div> 노드를 생성합니다.

 

let text = document.createTextNode('안녕?');

<div> 노드에 넣을 텍스트 노드를 생성합니다.

 

div.appendChild(text);

텍스트 노드를 <div> 노드의 자식 노드로 추가합니다.

아직, 화면에 <div> 노드를 붙여 넣지 않았으므로,

아직 화면에는 아무것도 나타나지 않습니다.

 

document.body.append(div);

'<div>안녕?</div>' 노드를 문서의 body 파트에 붙여 넣습니다.

 

 

 

2. 추가

생성한 노드를 적당한 위치에 붙여 넣는 방법입니다.

 

before() / after() / prepend() / append()

생성한 노드를 붙여 넣을 위치에 따라 위 4가지 함수 중 하나를 사용할 수 있습니다.

• before() - 노드 또는 문자열을 선택된 노드의 앞에 추가합니다.
• after() - 노드 또는 문자열을 선택된 노드의 뒤에 추가합니다.
• prepend() - 노드 또는 문자열을 선택된 노드의 첫 번째 자식 element 앞에 추가합니다.
• append() - 노드 또는 문자열을 선택된 노드의 마지막 자식 element 뒤에 추가합니다.

노드가 생성되는 위치를 시각화하면 다음과 같습니다.

<!-- before() -->
<div>
    <!-- prepend() -->
    안녕?
    <!-- append() -->
</div>
<!-- after() -->

 

  예제  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick=' before()' value='before()' />
<input type='button' onclick=' after()' value='after()' />
<input type='button' onclick=' prepend()' value='prepend()' />
<input type='button' onclick=' append()' value='append()' />

function before() {
  const list = document.getElementById('list');
  
  // list(<ul>) 앞에 'before' 텍스트 추가
  list.before('before');
}

function after() {
  const list = document.getElementById('list');
  
  // list(<ul>) 뒤에 'after' 텍스트 추가
  list.after('after');
}

function prepend() {
  const list = document.getElementById('list');
  
  // list(<ul>)의 첫번째 자식 노드 뒤에 <li> 노드 추가
  const prepend = document.createElement('li');
  prepend.innerHTML = 'prepend';
  list.prepend(prepend);
}

function append() {
  const list = document.getElementById('list');
  
  // list(<ul>)의 마지막 자식 노드 뒤에 <li> 노드 추가
  const append = document.createElement('li');
  append.innerHTML = 'append';
  list.append(append);
}

 

list.before('before');

<ul> 노드 앞에 'before' 텍스트를 추가합니다.

 

list.after('after');

<ul> 노드 앞에 'after' 텍스트를 추가합니다.

 

list.prepend(prepend);

<ul> 노드의 첫번째 자식 요소(element) 앞에

새로 생성한 <li> 요소를 추가합니다.

즉, prepend() 함수를 사용하여 노드를 추가하면

첫번째 자식 요소로 추가되게 됩니다.

 

list.append(append);

<ul> 노드의 마지막 자식 요소(element) 뒤에

새로 생성한 <li> 요소를 추가합니다.

즉, append() 함수를 사용하여 노드를 추가하면

마지막 자식 요소로 추가되게 됩니다.

 

  예제 - 여러 개 노드 한꺼번에 추가하기  

<div id='my_div'> </div>

<input type='button' 
       onclick='insertMultiNode()' 
       value='여러 노드 추가하기' />

// 한꺼번에 여러 노드 추가하기
function insertMultiNode() {
  const my_div = document.getElementById('my_div');
  
  const text1 = '새 div 1, ';
  const text2 = '새 div 2, ';
  const text3 = '새 div 3, ';
  
  my_div.append(text1, text2, text3);
}

 

before(), after(), prepend(), append() 함수에서

파라미터로 여러 개의 노드를 넘겨주면

한꺼번에 여러개의 노드를 추가할 수 있습니다.

 

my_div.append(text1, text2, text3);

이 구문처럼 추가할 노드를 파라미터로 나열해주면,

한꺼번에 여러 노드가 추가됩니다.

 

 

insertAdjacentHTML() / insertAdjacentElement() / insertAdjacentText()

before(), after(), prepend(), append()와 비슷하게

insertAdjacentHTML(), insertAdjacentElement(), insertAdjacentText()  함수를 사용할 수도 있습니다.

 

 insertAdjacentHTML() 

insertAdjacentHTML(position, htmlText);

insertAdjacentHTML()  함수는

파라미터로 입력받은 htmlText(HTML 또는 XML)을 파싱 하여 노드로 변환하고,

이 노드를 position으로 입력받은 위치에 삽입합니다.

 

 insertAdjacentElement() 

insertAdjacentElement(position, element);

insertAdjacentElement() 함수는

파라미터로 입력받은  요소(element)를

position으로 입력받은 위치에 삽입합니다.

 

 insertAdjacentText() 

insertAdjacentText(position, text);

insertAdjacentText() 함수는

파라미터로 입력받은 텍스트(text)를

position으로 입력받은 위치에 삽입합니다.

 

  position 값  

그렇다면, position에는 어떤 값을 넣어주어야 할까요?

• beforebegin - 선택된 노드의 앞
• afterend - 선택된 노드의 뒤
• afterbegin - 선택된 노드의 첫 번째 자식 노드 앞
• beforeend - 선택된 노드의 마지막 자식 노드 뒤

이름이 조금 다르지만,

노드의 위치를 지정하는 방법이

before(), after(), prepend(), append()와 비슷하죠?

위 position의 위치를 좀 더 시각화해서 보면 이렇습니다.

(<div>를 선택하고, position을 지정했을 경우의 예시입니다.)

<!-- beforebegin -->
<div>
   <!-- afterbegin -->
   안녕?
   <!-- beforeend -->
</div>
<!-- afterend -->

 

  예제 - insertAdjacentHTML()의 position  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' 
       onclick=' beforebegin()' 
       value='beforebegin()' />
<input type='button' 
       onclick='afterend()' 
       value='afterend()' />
<input type='button'
       onclick='afterbegin()' 
       value='afterbegin()' />
<input type='button'
       onclick=' beforeend()' 
       value='beforeend()' />

// list(<ul>) 앞에 '<div>beforebegin</div>' HTML 추가
function beforebegin() {
  const list = document.getElementById('list');
  
  const htmlText = '<div>beforebegin</div>';
  list.insertAdjacentHTML('beforebegin', htmlText);
}

// list(<ul>) 뒤에 '<div>afterend</div>' HTML 추가
function afterend() {
  const list = document.getElementById('list');
  
  const htmlText = '<div>afterend</div>';
  list.insertAdjacentHTML('afterend', htmlText);
}

// list(<ul>)의 첫번째 자식 노드 뒤에 <li> 노드 추가
function afterbegin() {
  const list = document.getElementById('list');
  
  const htmlText = '<li>afterbegin</li>';
  list.insertAdjacentHTML('afterbegin', htmlText);
}

// list(<ul>)의 마지막 자식 노드 뒤에 <li> 노드 추가
function beforeend() {
  const list = document.getElementById('list');
  
  const htmlText = '<li>beforeend</li>';
  list.insertAdjacentHTML('beforeend', htmlText);
}

 

list.insertAdjacentHTML('beforebegin', htmlText);

<ul> 노드의 위쪽에 HTML을 파싱 하여 생성한 노드가 추가됩니다.

 

list.insertAdjacentHTML('afterend', htmlText);

<ul> 노드의 아래쪽에 HTML을 파싱하여 생성한 노드가 추가됩니다.

 

list.insertAdjacentHTML('afterbegin', htmlText);

<ul> 노드의 첫 번째 자식 노드 앞에 HTML을 파싱 하여 생성한 노드가 추가됩니다.

 

list.insertAdjacentHTML('beforeend', htmlText);

<ul> 노드의 마지막 자식 노드 뒤에 HTML을 파싱하여 생성한 노드가 추가됩니다.

 

 

  예제 - insertAdjacentHTML(), insertAdjacentElement(), insertAdjacentText()  

<div id='my_div'> 안녕하세요 </div>

<input type='button' 
       onclick='iAdjacentHTML()' 
       value='insertAdjacentHTML()' />
<input type='button' 
       onclick='iAdjacentElement()' 
       value='insertAdjacentElement()' />
<input type='button'
       onclick='iAdjacentText()' 
       value='insertAdjacentText()' />

// insertAdjacentHTML()
function iAdjacentHTML() {
  const my_div = document.getElementById('my_div');
  
  const htmlText = '<div>insertAdjacentHTML</div>';
  my_div.insertAdjacentHTML('beforebegin', htmlText);
}

// insertAdjacentElement()
function iAdjacentElement() {
  const my_div = document.getElementById('my_div');
  
  const element = document.createElement('div');
  element.innerHTML = 'insertAdjacentElement';
  
  my_div.insertAdjacentElement('beforebegin', element);
}

// insertAdjacentText()
function iAdjacentText() {
  const my_div = document.getElementById('my_div');
  
  const text = '<div>insertAdjacentText</div>';
  my_div.insertAdjacentText('beforebegin', text);
}

 

my_div.insertAdjacentHTML('beforebegin', htmlText);

파라미터로 전달된 HTML을 파싱하여 생성한 노드가 삽입됩니다.

 

my_div.insertAdjacentElement('beforebegin', element);

파라미터로 전달된 요소 객체가 삽입됩니다.

 

my_div.insertAdjacentText('beforebegin', text);

파라미터로 전달된 텍스트가 그대로 삽입됩니다.

 

 

appendChild()

let child = element.appendChild(child);

appendChild() 함수는

선택한 노드의 마지막 자식 노드 뒤에

파라미터로 전달받은 노드를 붙입니다.

append() 함수와 비슷하게 동작합니다.

 

  예제  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick='myAppendChild()' value='appendChild()' />

function myAppendChild() {
  const list = document.getElementById('list');
  
  // list(<ul>)의 마지막 자식 노드 뒤에 <li> 노드 추가
  const append = document.createElement('li');
  append.innerHTML = 'appendChild';
  list.appendChild(append);
}

 

list.appendChild(append);

<ul> 노드의 마지막 자식 노드 뒤에 '<li>appendChild</li>' 노드를 추가합니다.

 

appendChild() vs appned()

appnedChild()와 append()는 매우 비슷하게 동작하지만,

몇 가지 차이가 있습니다.

• append()는 파라미터로 node 객체와 text를 모두 입력받지만,
  appendChild()는 파라미터로 node 객체만을 허용합니다.
• append()는 리턴 값이 없습니다.
  appnedChild()는 추가한 자식 노드를 리턴합니다.
• append()는 한 번에 여러 노드를 추가할 수 있습니다.
  appendChild()는 한번에 하나의 노드만 추가할 수 있습니다.

 

insertBefore()

let insertedNode = parentNode.insertBefore(newNode, referenceNode);

insertBefore() 함수는

newNode를 parentNode의 자식 노드 중 하나인 referenceNode 앞에 추가합니다.

 

  파라미터  

• newNode
  
  • 추가할 노드
• referenceNode
  
  • parentNode의 자식 노드이며,
    newNode는 referenceNode의 앞에 추가됩니다.
  • referenceNode가 null이면, newNode는 자식 노드의 끝에 추가됩니다.

 

  예제  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick='insertBefore2()' value='insertBefore(node, refNode)' />
<input type='button' onclick='insertEnd()' value='insertBefore(node, null)' />

// <li>2</li> 앞에 노드 추가
function insertBefore2() {
  const list = document.getElementById('list');
  
  // newNode
  const newNode = document.createElement('li');
  newNode.innerHTML = '1.5';
  
  // referenceNode
  const referenceNode = document.getElementById('second');
  
  // insertBefore
  list.insertBefore(newNode, referenceNode);
}

// <ul>의 자식 노드 맨 뒤에 추가
function insertEnd() {
  const list = document.getElementById('list');
  
  // newNode
  const newNode = document.createElement('li');
  newNode.innerHTML = '4';
  
  // insertBefore
  list.insertBefore(newNode, null);
}

 

list.insertBefore(newNode, referenceNode);

newNode는 referenceNode인 ';<li>2</li>' 앞에 추가됩니다.

 

list.insertBefore(newNode, null);

referenceNode가 null 이므로,

newNode는 '<ul>' 노드의 마지막 자식 노드인 '<li>3</li>' 뒤에 추가됩니다.

 

 

 

3. 변경

replaceWith()

node.replaceWith(param1);
node.replaceWith(param1,....,paramN);

node를 새로운 노드나 문자열(param1, ...paramN)로 대체합니다.

 

  예제  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick='replaceWithEx()' value='replaceWith()' />

// <li>2</li> 노드 교체
function replaceWithEx() {
  // 교체할 기존 노드, <li>2</li>
  const oldNode = document.getElementById('second');
  
  // 교체할 새 노드, <li>2(new)</li>
  const newNode = document.createElement('li');
  newNode.id='second';
  newNode.innerHTML = '2(new)';
  
  // replaceWith()
  oldNode.replaceWith(newNode);

}

 

oldNode.replaceWith(newNode);

oldNode(<li>2</li>)를 newNode(<li>2(new)</li>)로 교체합니다.

 

 

  예제 - 여러 노드로 교체하기  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick='replaceWithEx()' value='replaceWith()' />

// <li>2</li> 노드 교체
function replaceWithEx() {
  // 교체할 기존 노드, <li>2</li>
  const oldNode = document.getElementById('second');
  
  // 교체할 새 노드, <li>2-1(new)</li>
  const newNode1 = document.createElement('li');
  newNode1.id='second';
  newNode1.innerHTML = '2-1(new)';
  
  // 교체할 새 노드, <li>2-2(new)</li>
  const newNode2 = document.createElement('li');
  newNode2.id='second_2';
  newNode2.innerHTML = '2-2(new)';
  
  // replaceWith()
  oldNode.replaceWith(newNode1, newNode2);

}

 

한 개의 노드를 여러 노드로 교체할 수도 있습니다.

 

oldNode.replaceWith(newNode1, newNode2);

replaceWith()의 파라미터로 여러 개의 노드를 전달하여

oldNode를 newNode1, newNode2로 교체하였습니다.

 

  

 

replaceChild()

let replaceNode = parentNode.replaceChild(newChild, oldChild); 

parentNode의 자식 노드 중 oldChild를 newChild로 교체합니다.

이 함수는 교체된 노드, 즉 oldChild 노드와 동일한 노드를 리턴합니다.

parentNode가 oldChild의 부모 노드가 아닐 경우 exception(NotFoundError)이 발생합니다.

 

  예제  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick='replaceChildEx()' value='replaceChild()' />

// <li>2</li> 노드 교체
function replaceChildEx() {
  // 교체할 기존 노드, <li>2</li>
  const oldNode = document.getElementById('second');
  
  // 교체할 기존 노드의 parent 노드
  const parent = oldNode.parentNode;
  
  // 교체할 새 노드, <li>2(new)</li>
  const newNode = document.createElement('li');
  newNode.id='second';
  newNode.innerHTML = '2(new)';
  
  // replaceChild()
  parent.replaceChild(newNode, oldNode);

}

 

parent.replaceChild(newNode, oldNode);

parent의 하위 노드인 oldNode를 newNode로 교체합니다.

replaceChild() 함수를 사용하기 위해서는

교체할 노드의 부모 노드를 알아야 한다는 불편함이 있습니다.

 

 

 

4. 삭제

remove()

node.remove()

이 함수는 선택된 노드를 삭제합니다.

 

  예제  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick='removeEx()' value='remove()' />

// <li>2</li> 노드 삭제
function removeEx() {
  
  // 삭제할 기존 노드, <li>2</li>
  const child = document.getElementById('second');
  
  // 삭제 : remove()
  child.remove();

}

 

 

child.remove();

선택한 노드(<li id='second'>2</li>)를 삭제합니다.

 

 

removeChild()

parentNode.removeChild(child);

이 함수는 파라미터로 전달받은 child 노드를 삭제합니다.

이때, 파라미터로 전달한 child 노드는 parentNode의 자식 노드여야 합니다.

 

  예제  

<div>목록</div>
<ul id='list'>
  <li id='first'>1</li>
  <li id='second'>2</li>
  <li id='third'>3</li>
</ul>
<div>목록 끝</div>

<input type='button' onclick='removeChildEx()' value='removeChild()' />

// <li>2</li> 노드 삭제
function removeChildEx() {
  // 삭제할 기존 노드, <li>2</li>
  const child = document.getElementById('second');
  
  // 삭제할 기존 노드의 parent 노드
  const parent = child.parentNode;
  
  // 삭제 : removeChild()
  parent.removeChild(child);

}

 

parent.removeChild(child);

child 노드(<li id='second'>2</li>)를 삭제합니다.

removeChild() 함수를 사용하여 노드를 삭제할 때는

부모 노드를 반드시 알아야 하는 불편함이 있습니다.

 

 

 

5. 복사

cloneNode()

let dupNode = node.cloneNode(deep);

이 함수는 함수를 호출한 node의 복사본을 리턴합니다.

 

  파라미터  

• deep 
  • true : node의 children까지 복사
  • false : 해당 노드만 복사
  • default 값은 브라우저의 버전에 따라 다르므로, deep 값을 반드시 써 주는 것이 좋습니다.

 

  노드 복사하여 붙여 넣기 예제  

<div id='hello'>
  <p style='color: red'>안녕하세요</p>
</div>

<input type='button' value='복사/붙여넣기' onclick='cloneNodeEx()' />

// 'hello' 노드 복사하여 붙여넣기
function cloneNodeEx() {
  
  // 복사할 노드 선택
  const hello = document.getElementById('hello');
  
  // 복사
  const helloCopy = hello.cloneNode(true);
  
  // id 변경
  helloCopy.id = 'hello2';
  
  // 붙여넣기
  document.body.append(helloCopy);
}

 

const hello = document.getElementById('hello');

복사할 노드를 선택합니다.

 

const helloCopy = hello.cloneNode(true);

cloneNode() 함수를 사용하여 노드를 복사합니다.

 

helloCopy.id = 'hello2';

복사한 노드의 id를 변경해 줍니다.

id를 변경해주지 않으면, 동일한 id를 가진 노드가 문서 안에 여러 개 존재하게 됩니다.

(예제에서는 버튼을 여러 번 클릭하면 'hello2'라는 id를 가진 노드가 여러 개 존재하게 됩니다.

예제를 간단하게 하기 위해 이렇게 코드를 작성했지만,

실제로는 이런 일이 일어나는 상황은 피해야겠죠)

 

document.body.append(helloCopy);

문서에 복사한 노드를 추가합니다.