JS 관련/JavaScript

[JavaScript] DOM( createElement / createAttribute )

씨네 2022. 1. 28. 13:43
728x90

createElement("String tagName") -> 엘리먼트 객체 생성

createTextNode("String text") -> text 객체 생성

​

createAttribute("String attrName") -> 속성(Attribute) 생성

setAttributeNode(Attribite attr) -> 속성 추가

​

setAttribute("String attr", "String value") -> 위의 두줄을 하나로

​

​

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	function createEle(){
		var div = document.createElement("div")				//<div></div>
		
		// 1.
		/*
		var attr = document.createAttribute("style")			// style=""
		attr.nodeValue="border: 2px solid blue";			// style="border: 2px solid blue;"
		div.setAttributeNode(attr);							// <div style="border: 2px solid blue;"</div>
		*/
		
		// 2.
		div.setAttribute("style", "border: 2px dashed red;");
		
		
		var txt = document.createTextNode("div 생성");		// "div 생성"
		div.appendChild(txt);								// <div style="border: 2px solid blue;">div 생성</div>
		
		document.body.appendChild(div);						// body에 추가
	}

</script>
</head>
<body>

	<button onclick="createEle();">엘리먼트 생성하기</button>

</body>
</html>

createElement는 태그를 생성하는 메소드입니다.

createElement("div")는 <div></div>를 생성합니다.

위의 코드에서는 주석처리 되어있지만 createAttribute는 태그에 속성을 추가합니다.

div.setAttribute("style", "border: 2px dashed red;");

현재 div라는 변수에는 div태크를 생성하라는 명령이 담겨있습니다.

해당 명령이 실행되면 div태그가 생기면서 style속성도 생깁니다.

dashed 방식인 빨간색 테두리가 생기겠네요.

div.appendChild(txt);

txt라는 변수에는 "div 생성"이라는 텍스트를 생성하라는 명령이 담겨있습니다.

document.body.appendChild(div);

이 명령을 body에 수행하겠다고 합니다.

따라서 버튼을 누를때마다 위와 같은 텍스트와 테두리가 나옵니다

728x90