JavaScript DOM 동적 삽입 완전 정리

 

 

Web Development · JavaScript

JavaScript DOM 동적 삽입

createElement, appendChild, removeChild, prompt, innerHTML 흐름을 정리합니다.

시작 오늘 분석할 코드

이 장은 DOM 요소를 새로 만들고, 기존 요소의 스타일과 내용을 바꾸는 연습입니다. 핵심은 요소를 찾는 단계, 새 요소를 만드는 단계, 부모 요소에 붙이거나 스타일을 바꾸는 단계를 분리해서 보는 것입니다.

function addAnswer(obj, text) { let parent = obj.parentElement; if (obj != parent.lastElementChild) return; let newP = document.createElement("p"); newP.onclick = function() { let par = this.parentElement; par.removeChild(this); }; newP.innerHTML = text; parent.appendChild(newP); } function changeInnerHTML(obj) { let text = prompt("HTML 텍스트 혹은 그냥 텍스트를 입력하세요", ""); if (text == null || text == "") return; obj.innerHTML = text; }

createElement새 DOM 요소를 생성합니다.

appendChild부모 요소의 마지막 자식으로 붙입니다.

removeChild부모에서 자식 요소를 제거합니다.

parentElement현재 요소의 부모입니다.

lastElementChild마지막 자식 요소입니다.

innerHTMLHTML 문자열을 요소 내용으로 넣습니다.

---

1 DOM 동적 삽입의 흐름

동적 삽입은 JavaScript로 새 요소를 만들고 기존 DOM 트리에 붙이는 작업입니다. 원본은 답보기 버튼을 누르면 p 요소를 만들어 div 안에 추가합니다.

createElement

→

innerHTML 설정

→

appendChild

코드	역할	결과
parentElement	부모 요소 찾기	button을 감싼 div
lastElementChild	마지막 자식 확인	중복 삽입 방지
createElement("p")	새 p 생성	아직 화면에는 없음
appendChild	부모에 붙이기	화면에 표시

---

2 중복 답 방지

if(obj != parent.lastElementChild) return;은 이미 답이 추가된 상태에서 버튼을 다시 눌러도 같은 답이 계속 늘어나지 않게 막습니다.

버튼이 마지막 자식

아직 답이 없으므로 새 답을 추가합니다.

버튼 뒤에 답 p 존재

버튼이 마지막 자식이 아니므로 return합니다.

---

3 클릭하면 삭제되는 답

두 번째 버전은 새 p에 onclick 함수를 붙입니다. 사용자가 답 문장을 클릭하면 자기 자신을 부모에서 제거합니다.

1

답 p 생성createElement로 새 p를 만듭니다.

2

onclick 등록새 p 자신에게 삭제 함수를 붙입니다.

3

부모 찾기this.parentElement로 부모 div를 찾습니다.

4

removeChild부모에서 자기 자신을 제거합니다.

---

 

반응형

 

4 innerHTML과 prompt

innerHTML(prompt) 예제는 p를 클릭하면 prompt로 입력을 받고, 입력한 HTML 또는 텍스트를 p 안에 넣습니다.

상황	처리	의미
취소	text == null	아무것도 바꾸지 않음
빈 문자열	text == ""	아무것도 바꾸지 않음
일반 텍스트	innerHTML 대입	문장 변경
HTML 문자열	태그 해석	굵게/링크 등 적용 가능

사용자 입력을 innerHTML에 그대로 넣으면 보안 문제가 될 수 있습니다. 학습용 예제라는 점을 기억합니다.

---

5 리스트에 항목 추가

라면 순서 예제는 ol을 클릭하면 prompt 입력값으로 li를 만들고, 그 li를 ol의 마지막에 붙입니다.

ol 클릭

→

prompt 입력

→

li append

코드	역할	결과
addItem(this)	클릭한 ol 전달	parent로 사용
createElement("li")	목록 항목 생성	새 순서 항목
liObj.innerHTML	입력 내용 넣기	텍스트 표시
parent.appendChild	목록에 붙이기	맨 뒤 추가

---

6 appendChild와 removeChild

DOM 조작에서 appendChild는 붙이고 removeChild는 제거합니다. 둘 다 부모와 자식 관계를 정확히 알아야 합니다.

메서드	필요한 것	결과
appendChild(child)	부모 요소와 새 자식	부모 끝에 추가
removeChild(child)	부모 요소와 기존 자식	자식 제거
parentElement	현재 요소	부모 접근
this	이벤트 대상	클릭된 요소

---

7 자주 하는 실수

실수	증상	해결
중복 삽입 방지 없음	답이 계속 늘어납니다.	lastElementChild를 확인합니다.
부모 요소 착각	removeChild가 실패합니다.	this.parentElement를 확인합니다.
prompt 취소 처리 없음	null이 들어갑니다.	null과 빈 문자열을 검사합니다.
innerHTML 입력 과신	HTML이 실행됩니다.	필요하면 textContent를 씁니다.
append 대상 오류	엉뚱한 곳에 li가 붙습니다.	this로 parent를 명확히 전달합니다.

---

8 복습 체크리스트

체크	통과 기준
createElement	새 DOM 요소를 만드는 메서드임을 압니다.
appendChild	부모의 마지막 자식으로 추가합니다.
removeChild	부모에서 특정 자식을 제거합니다.
parentElement	현재 요소의 부모에 접근합니다.
innerHTML	HTML 문자열이 해석된다는 점을 압니다.
prompt	취소와 빈 값을 처리해야 함을 압니다.

---

9 디버깅 포인트

확인	콘솔 예시	의미
부모	console.log(parent)	붙일 대상 확인
마지막 자식	console.log(parent.lastElementChild)	중복 방지 조건 확인
새 요소	console.log(newP)	생성된 p 확인
입력값	console.log(text)	prompt 결과 확인
목록 개수	console.log(parent.children.length)	추가 후 개수 확인

---

10 테스트 케이스

케이스	동작	예상 결과
답보기 1회	버튼 클릭	답 p 추가
답보기 반복	버튼 재클릭	중복 추가 안 됨
답 클릭	추가된 p 클릭	답 p 삭제
prompt 취소	취소 클릭	내용 유지
라면 순서 추가	ol 클릭 후 입력	li 추가

---

11 개선 연습

동적 삽입 예제는 입력값 검증, 중복 방지, 삭제 기능을 조금씩 확장하기 좋습니다. 새 요소가 언제 만들어지고 어디에 붙는지 계속 확인하면서 연습합니다.

A

답 색상 지정새로 만든 p에 color나 background를 지정해 답임을 표시합니다.

B

삭제 안내 추가답 p에 “클릭하면 삭제” 같은 문구를 함께 넣습니다.

C

입력 길이 제한prompt 입력이 너무 길면 추가하지 않도록 처리합니다.

D

textContent 적용HTML 해석이 필요 없으면 innerHTML 대신 textContent를 써 봅니다.

개선	효과	확인
class 추가	새 요소 스타일을 CSS로 관리합니다.	newP.className
삭제 버튼 추가	텍스트 클릭보다 명확합니다.	button createElement
중복 텍스트 검사	같은 항목 반복 추가를 줄입니다.	children 순회
빈칸 trim	공백 입력을 막습니다.	text.trim()
입력 로그	prompt 결과를 확인합니다.	console.log(text)

---

12 보안과 출력 방식

예제에서는 innerHTML이 편리하지만, 입력값을 그대로 HTML로 해석한다는 특징이 있습니다. 단순 텍스트 추가라면 textContent가 더 안전합니다.

innerHTML

태그 문자열을 실제 HTML로 해석합니다. 굵게 표시 같은 표현이 가능합니다.

textContent

입력한 내용을 텍스트 그대로 표시합니다. 사용자 입력 출력에 더 안전합니다.

입력	innerHTML	textContent
<b>라면</b>	굵게 표시	태그 문자열 그대로 표시
일반 텍스트	텍스트 표시	텍스트 표시
빈 문자열	검사 후 무시	검사 후 무시
HTML 조각	해석됨	해석 안 됨

---

13 DOM 삽입 패턴 정리

여러 예제는 모두 같은 패턴으로 볼 수 있습니다. 입력을 받고, 요소를 만들고, 값을 넣고, 부모에 붙이는 흐름입니다.

예제	입력	생성 요소	붙는 위치
답보기	함수 인자 text	p	질문 div
삭제 답	함수 인자 text	p	질문 div
innerHTML 변경	prompt	새 요소 없음	클릭한 p 내부
라면 순서	prompt	li	ol 내부

1

대상 정하기어느 부모에 붙일지 먼저 정합니다.

2

입력 검증null, 빈 문자열, 공백만 있는 값을 걸러냅니다.

3

요소 생성createElement로 필요한 태그를 만듭니다.

4

삽입 또는 변경appendChild나 innerHTML/textContent로 화면을 바꿉니다.

---

14 추가 테스트

테스트	확인 내용
답 삭제 후 재추가	삭제한 뒤 버튼을 다시 누르면 답이 다시 추가되는지 봅니다.
공백 입력	공백만 입력했을 때 추가 여부를 확인합니다.
HTML 입력	innerHTML과 textContent 차이를 확인합니다.
여러 li 추가	순서대로 마지막에 붙는지 봅니다.
부모 확인	appendChild 대상이 예상한 요소인지 확인합니다.

---

핵심 한 줄 요약

insertcreateElement로 만들고 appendChild로 붙입니다.

remove클릭한 p는 parentElement와 removeChild로 제거합니다.

inputprompt 입력은 null과 빈 문자열을 먼저 검사합니다.

Tags

#JavaScript#DOM#createElement#appendChild#removeChild#innerHTML#prompt#parentElement#동적삽입#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, DOM, createElement, appendChild, removeChild, innerHTML, prompt, parentElement, 동적삽입, 티스토리