[JavaScript] DOM( createElement / createAttribute )

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

'JS 관련 > JavaScript' 카테고리의 다른 글

[JavaScript] DOM( 이미지 속성 변경 ) (0)	2022.01.30
[JavaScript] DOM( img바꾸기 ) (0)	2022.01.29
[JavaScript] DOM(parentNode / childNodes) (0)	2022.01.27
[JavaScript] select(리스트 선택) (0)	2022.01.26
[JavaScript] checkbox로 개별선택, 전체선택 함수 만들기 (0)	2022.01.25

'JS 관련 > JavaScript' 카테고리의 다른 글

티스토리툴바