WEB/JAVASCRIPT
자바스크립트로 문서에 HTML요소 추가하기
by 둥바
2022. 6. 30.
Document.createElement();
태그네임의 HTML요소 노드를 생성한다.
Document.createElement("h1"); //<h1></h1>을 생성
Document.createTextNode();
선택한 요소에 텍스트 노드를 추가한다.
Document.createTextNode("안녕하세요.");
부모노드.appendChild(자식노드);
부모노드에 자식노드를 추가한다.
parent.appendChild(child);
부모노드.removeChild(자식노드);
부모노드의 자식노드를 제거한다.
parent.removeChild(child);
예제 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div1">
<h1 id="title" style="color:red;" onclick="addtext('추가')"> 나를 클릭해봐! </h1>
</div>
<div>
<ul id="list">
<li>리스트 1</li>
<li id="last">리스트 2</li>
</ul>
</div>
<button type="button" onclick="removelist()">삭제</button>
<script type="text/javascript">
function addtext(txt){
if(document.createTextNode){ //텍스트 노드 생성이 가능하다면
var secondh = document.createElement("p"); // p 태그 생성
secondh.style.color="blue";
secondh.style.fontSize="15px";
var t1 = document.createTextNode("제목 추가"); //text노드 생성
secondh.appendChild(t1); //p태그에 텍스트 노드 추가
var btn = document.createElement("button"); //버튼 생성
var t2 = document.createTextNode(txt);//매개변수 받아서 텍스트 노드 생성
btn.appendChild(t2);//버튼 안에 텍스트 노드 추가
document.getElementById("title").appendChild(secondh); //div에 추가
document.getElementById("title").appendChild(btn); //div에 추가
}
}
function removelist(){
var parent = document.getElementById("list");
var child = document.getElementById("last");
parent.removeChild(child);
}
</script>
</body>
</html>