728x90
반응형
<Element생성>
1. createElement("tagName"): 엘리먼트 객체 생성
2-1. createTextNode("text내용"): 텍스트 객체 생성(방법 1) → 1번의 변수.appendChild(2번변수)
2-2. 1번의 변수.textContent("text내용"): 텍스트 객체생성(방법 2)
3-1. createAttribute("attrName"): 객체의 속성 생성(방법 1) → 속성추가 setAttributeNode(3-1변수)
3-2. setAttributeNode("attr", "value값"): 객체 속성 생성과 추가 동시에
<예제 기본 body>
<body>
<button onclick="createEle();">엘리먼트 생성</button>
</body><script>
<script type="text/javascript">
function createEle(){
//1. 엘리먼트 생성 <div></div>
var div = document.createElement("div");
//2. 텍스트 입력
div.textContent("엘리먼트 생성");
//3-1. 속성생성
var attr = document.createAttribute("style");
//속성추가 <div style="border:1px solid red;"></div>
attr.nodeValue("border:1px solid red;");
// 엘리먼트에 속성 추가
div.setAttributeNode(attr);
//4. body에 추가
document.body.appendChild(div);
}
</script>
728x90
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JS]DOM_getElement (0) | 2020.07.30 |
|---|---|
| [JS]DOM_img생성(연습) (0) | 2020.07.30 |
| [JS]String (0) | 2020.07.28 |
| [JS]Math (0) | 2020.07.28 |
| [JS]date_D-day (0) | 2020.07.28 |
