[Javascript] 노드 생성(텍스트), 추가, 변경, 삭제, 복사 총정리
Javascript에서 노드 생성, 텍스트 생성, 추가, 변경, 삭제, 복사하는 방법을
정리하였습니다.
- 생성
- createElement()
- createTextNode()
- 추가
- before()
- after()
- prepend()
- append()
- insertAdjacentHTML()
- insertAdjacentElement()
- insertAdjacentText()
- appendChild()
- appencChild() vs appned()
- insertBefore()
- 변경
- repaceWith()
- replaceChild()
- 삭제
- remove()
- removeChild()
- 복사
- 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는 자식 노드의 끝에 추가됩니다.
- 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='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);
문서에 복사한 노드를 추가합니다.