JS/jQuery - 콘텐츠 요소(html, text, node) 다루기 총 정리✨
2024. 7. 11.
목차
웹 개발에서 HTML 요소를 동적으로 조작하는 것은 필수적이다. 콘텐츠 요소를 삽입, 수정하는 함수는 HTML을 포함한 콘텐츠를 모두 삽하는 함수와 HTML태그 없이 텍스트만 삽입하는 함수, 그리고 요소(Node)를 삽입하는 함수로 나눌 수 있고 콘텐츠를 제거하거나 복사할 수도 있다.
바닐라 스크립트
❣️콘텐츠 요소 삽입하기
| 함수 | 설명 | 기존내용유지 |
|---|---|---|
| innerText | 텍스트 삽입 (보이는 것만) | ❌ |
| textContent | 텍스트 삽입 (숨겨진 것도 포함) | ❌ |
| append() | 맨 뒤에 노드 또는 텍스트 삽입 | ✅ |
| appendChild() | 맨 뒤에 노드만 삽입 | ✅ |
| prepend() | 맨 앞에 노드 또는 텍스트 삽입 | ✅ |
| innerHTML | HTML 포함하여 내부 변경 | ❌ |
| outerHTML | 자기 자신의 HTML까지 포함하여 변경 | ❌ |
| insertBefore() | 특정 요소 앞에 노드만 삽입 | ✅ |
| insertAdjacentText() | 특정 위치에 텍스트만 삽입 | ✅ |
| insertAdjacentElement() | 특정 위치에 노드만 삽입 | ✅ |
| insertAdjacentHTML() | 특정 위치에 HTML 삽입 | ✅ |
innerText
요소 내부에 텍스트를 추가한다. 요소의 렌더링된 텍스트만 포함하기 때문에 display: none 등으로 숨겨진 요소의 텍스트는 포함되지 않는다. 여러 개의 공백은 하나의 공백으로 처리된다.
<div id="example">
Hello <span class="hidden">World</span>!
</div>
<script>
const exampleDiv = document.getElementById("example");
console.log("innerText:", exampleDiv.innerText); // "Hello !"
</script>
textContent
요소의 모든 텍스트를 포함하며, HTML 태그는 무시된다. 즉, 요소 내의 모든 텍스트를 가져오거나 추가, 변경 할 수 있다. 여러 개의 공백이 있는 경우 그대로 반환한다.
<div id="example">
Hello <span class="hidden">World</span>!
</div>
<script>
const exampleDiv = document.getElementById("example");
console.log("textContent:", exampleDiv.textContent); // "Hello World!"
</script>
append()
새로운 자식 요소를 추가한다. 여러 개의 노드를 한 번에 추가할 수 있으며, 텍스트 노드를 추가 할 수는 있지만 html 문자열을 추가 할 수는 없다. 이미 DOM에 있는 노드를 추가하면 해당 노드는 기존 위치에서 제거되고 새로운 위치로 이동된다.
<div id="container">
<p>첫 번째 문장</p>
</div>
<script>
const container = document.getElementById("container");
// 새로운 요소 생성
const newParagraph = document.createElement("p");
newParagraph.textContent = "두 번째 문장";
// append()를 사용하여 새로운 요소 추가
container.append(newParagraph, "세 번째 문장");
</script><div id="container">
<p>첫 번째 문장</p>
<p>두 번째 문장</p>
세 번째 문장
</div>
appendChild()
append()와 마찬가지로 새로운 자식 요소를 추가하지만 단일 노드만 추가 할 수 있으며, 텍스트 노드는 추가 할 수 없다.
<div id="container">
<p>첫 번째 문장</p>
</div>
<script>
const container = document.getElementById("container");
// 새로운 요소 생성
const newParagraph = document.createElement("p");
newParagraph.textContent = "두 번째 문장";
// appendChild()를 사용하여 새로운 요소 추가
container.appendChild(newParagraph);
</script><div id="container">
<p>첫 번째 문장</p>
<p>두 번째 문장</p>
</div>
prepend()
부모 요소의 맨 앞으로 새로운 자식 요소를 추가한다.
<div id="container">
<p>첫 번째 문장</p>
</div>
<script>
const container = document.getElementById("container");
// 새로운 요소 생성
const newParagraph = document.createElement("p");
newParagraph.textContent = "두 번째 문장";
// prepend()를 사용하여 새로운 요소 추가
container.prepend(newParagraph);
</script><div id="container">
<p>두 번째 문장</p>
<p>첫 번째 문장</p>
</div>
innerHTML
HTML 콘텐츠를 가져오거나 추가, 변경한다. 이 속성을 사용하여 새로운 HTML을 설정하면 기존의 모든 자식 요소가 삭제되고 새로운 HTML로 대체된다.
<div id="content">Old Content</div>
<script>
const contentDiv = document.getElementById("content");
contentDiv.innerHTML = "<p>New Content</p>"; // 기존 콘텐츠가 모두 삭제되고 새로운 콘텐츠로 대체됨
</script><div id="content">
<p>New Content</p>
</div>
outerHTML
선택한 요소 자체를 포함한 HTML콘텐츠를 가져오거나 추가, 변경한다.
<div id="content">Old Content</div>
<script>
const contentDiv = document.getElementById("content");
contentDiv.outerHTML = "<p>New Content</p>"; // 선택요소를 포함한 기존 콘텐츠가 모두 삭제되고 새로운 콘텐츠로 대체됨
</script><p>New Content</p>
insertBefore()
특정 요소 앞에 새로운 요소를 삽입한다.
<div id="container">
<p id="referenceElement">첫 번째 문장</p>
</div>
<script>
const container = document.getElementById("container");
// 새로운 요소 생성
const newParagraph = document.createElement("p");
newParagraph.textContent = "두 번째 문장";
// 참조 요소
const reference = document.getElementById("referenceElement");
// insertBefore()를 사용하여 새로운 요소 추가
container.insertBefore(newParagraph, reference);
</script><div id="container">
<p>두 번째 문장</p>
<p id="referenceElement">첫 번째 문장</p>
</div>
insertAdjacentText()
특정 위치에 텍스트를 삽입한다.
insertAdjacentElement()
특정 위치에 노드를 삽입한다. 기존 요소를 복사한 노드도 삽입한다.
insertAdjacentHTML()
특정 위치에 HTML 콘텐츠를 삽입한다.
<!-- beforebegin -->
<div class="content">
<!-- afterbegin -->
<p>내용</p>
<!-- beforeend -->
</div>
<!-- afterend -->
| 속성 | 설명 |
|---|---|
| beforebegin | 선택한 요소 바로 앞에 삽입 |
| afterbegin | 선택한 요소의 첫번째 자식으로 삽입 |
| beforeend | 선택한 요소의 마지막 자식으로 삽입 |
| afterend | 선택한 요소 바로 뒤에 삽입 |
check_circle Check
beforebegin와 afterend속성은 노드가 DOM 트리 내에 존재하고 부모요소를 가진 경우에만 동작한다.
<div id="example">Hello</div>
<script>
const exampleDiv = document.getElementById("example");
exampleDiv.insertAdjacentHTML("beforeend", "<strong>World</strong>"); // "Hello" 뒤에 "World"가 추가됨
</script><div id="example">
Hello
<strong>World</strong>
</div>
❣️콘텐츠 요소 제거하기
| 함수 | 설명 |
|---|---|
| remove() | 자기 자신 삭제 |
| removeChild() | 특정 자식 삭제 |
| replaceChild() | 특정 요소 교체 |
| replaceWith() | 자기 자신을 교체 |
remove()
선택한 요소 자신을 삭제한다.
<div id="example">
<p class="childElement">선택요소</p>
</div>
<script>
const exampleDiv = document.getElementById("childElement");
exampleDiv.remove();
</script><div id="example">
</div>
removeChild()
선택한 요소의 특정 자식을 삭제한다.
<div id="example">
<p class="childElement">자식요소</p>
</div>
<script>
const exampleDiv = document.getElementById("example");
const exampleChild = document.getElementById("childElement");
exampleDiv.removeChild(exampleChild);
</script><div id="example">
</div>
replaceChild()
특정 요소를 새로운 요소로 교체한다.
<div id="example">
<p class="childElement">내용</p>
</div>
<script>
const exampleDiv = document.getElementById("example");
const exampleChild = document.getElementById("childElement");
let newChild = document.createElement("div");
newChild.textContent = "새로운 요소";
exampleDiv.replaceChild(newChild, exampleChild);
</script><div id="example">
<div>새로운 요소</div>
</div>
replaceWith()
선택한 요소 자신을 새로운 요소로 교체한다.
<div id="example">
<p class="childElement">선택요소</p>
</div>
<script>
const exampleDiv = document.getElementById("childElement");
let newChild = document.createElement("div");
newChild.textContent = "새로운 요소";
exampleDiv.replaceWith(newChild);
</script><div id="example">
<div>새로운 요소</div>
</div>
❣️콘텐츠 요소 복사하기
cloneNode()
선택한 요소를 복사한다. true는 자식요소까지 복사하고, false은 자기 자신만 복사한다.
<div id="example">
<p>내용</p>
</div>
<script>
const exampleDiv = document.getElementById("example");
const clone = exampleDiv.cloneNode();
const cloneTrue = exampleDiv.cloneNode(true);
document.body.appendChild(clone);
document.body.appendChild(cloneTrue);
</script><div id="example">
<div>내용</div>
</div>
<div id="example">
</div>
<div id="example">
<div>내용</div>
</div>
제이쿼리
❣️콘텐츠 요소 삽입하기
| 함수 | 설명 | 기존내용유지 |
|---|---|---|
| append() | 마지막 자식으로 노드와 텍스트 삽입 | ✅ |
| prepend() | 첫번째 자식으로 노드와 텍스트 삽입 | ✅ |
| after() | 다음 형제로 노드와 텍스트 삽입 | ✅ |
| before() | 이전 형제로 노드와 텍스트 삽입 | ✅ |
| text() | 내부에 텍스트만 삽입 | ❌ |
| html() | 내부에 노드와 텍스트 삽입 | ❌ |
| wrap() | 요소의 새로운 부모요소 삽입 | ✅ |
| wrapAll() | 여러개의 요소의 새로운 부모요소 삽입 | ✅ |
| wrapInner() | 내부 콘텐츠의 부모요소 삽입 | ✅ |
append()
선택한 요소의 마지막 자식으로 추가한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').append('<p>마지막 자식 요소</p>');
</script><div id="container">
<p>내용</p>
<p>마지막 자식 요소</p>
</div>
prepend()
선택한 요소의 첫 번째 자식으로 추가한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').prepend('<p>첫 번째 자식 요소</p>');
</script><div id="container">
<p>첫 번째 자식 요소</p>
<p>내용</p>
</div>
after()
선택한 요소 바로 뒤에 추가한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').after('<div>다음 콘텐츠</div>');
</script><div id="container">
<p>내용</p>
</div>
<div>다음 콘텐츠</div>
before()
선택한 요소 바로 앞에 추가한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').before('<div>이전 콘텐츠</div>');
</script><div>이전 콘텐츠</div>
<div id="container">
<p>내용</p>
</div>
text()
선택한 요소 내부의 텍스트를 추가한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').text('새로운 요소');
</script><div id="container">
새로운 요소
</div>
html()
선택한 요소 내부의 노드와 텍스트를 추가한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').html('<div>새로운 요소</div>');
</script><div id="container">
<div>새로운 요소</div>
</div>
wrap()
선택한 요소에 새로운 부모요소를 추가한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').wrap('<div id="newContainer"></div>');
</script><div id="newContainer">
<div id="container">
<p>내용</p>
</div>
</div>
wrapAll()
선택한 여러개의 요소에 새로운 부모요소를 추가한다.
<div id="container">
<p>첫 번째 내용</p>
<p>두 번째 내용</p>
<p>세 번째 내용</p>
</div>
<script>
$('p').wrapAll('<div id="newContainer"></div>');
</script><div id="container">
<div id="newContainer">
<p>첫 번째 내용</p>
<p>두 번째 내용</p>
<p>세 번째 내용</p>
</div>
</div>
wrapInner()
선택한 요소 내부의 콘텐츠에 부모요소를 추가한다.
<div id="container">
내용
</div>
<script>
$('#container').wrapInner('<p></p>');
</script><div id="container">
<p>내용</p>
</div>
❣️콘텐츠 요소 제거하기
| 함수 | 설명 | 이벤트/데이터 유지 | 복구가능 |
|---|---|---|---|
| remove() | 요소와 내부 컨텐츠 삭제 | ❌ | ❌ |
| empty() | 내부 콘텐츠만 삭제 | ✅ | ❌ |
| detach() | 요소와 내부 컨텐츠 삭제 | ✅ | ✅ |
| unwrap() | 부모 요소 삭제 | ✅ | ❌ |
remove()
선택한 요소와 자식 요소까지 삭제한다.
<div id="container">
<p class="childElement">내용 <b>삭제</b></p>
</div>
<script>
$('#childElement').remove();
</script><div id="container">
</div>
empty()
선택한 요소의 내부 콘텐츠만 삭제한다.
<div id="container">
<p>내용</p>
</div>
<script>
$('#container').empty();
</script><div id="container">
</div>
detach()
선택한 요소를 삭제한 뒤 다시 추가 할 수도 있다.
<div id="container">
<p class="childElement">내용</p>
</div>
<script>
const childElement = $('#childElement');
childElement.detach();
$('#container').append(childElement);
</script><div id="container">
<p class="childElement">내용</p>
</div>
unwrap()
선택한 요소의 부모 요소를 삭제한다.
<div id="container">
<p class="childElement">내용</p>
</div>
<script>
$('#childElement').unwrap();
</script><p class="childElement">내용</p>
❣️콘텐츠 요소 복사하기
clone()
선택한 요소의 자식요소까지 복사한다. true는 이벤트 핸들러까지 복사한다.
<div id="container">
<p>내용</p>
</div>
<script>
const clone = $("#container").clone();
$('body').append(clone);
</script><div id="example">
<div>내용</div>
</div>
<div id="example">
<div>내용</div>
</div>