자바스크립트로 문서에 HTML요소 추가하기

WEB/JAVASCRIPT

자바스크립트로 문서에 HTML요소 추가하기

둥바 2022. 6. 30. 02:06

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>