고정 헤더 영역
상세 컨텐츠
본문 제목
JavaScript - 태그를 동적으로 만들어서 특정 엘리먼트에 추가하기(createElement, createTextNode, appendChild)
본문
<div>테스트</div> 태그를 동적으로 만들어서 특정 엘리먼트에 추가하기
1. div 엘리먼트 만들기
document.createElement(태그명)
var divEle = document.createElement("div");
메모리에 <div></div> 생성된 상태임...
2. 테스트 텍스트 노드 만들기
document.createTextNode(내용)
var txt = document.createTextNode("test");
3. 생성된 div 엘리먼트의 자식으로 텍스트 노드를 추가하기
부모.appendChild(자식)
divEle.appendChild(txt)
메모리에 <div>test</div>
4. 아이디가 "list"인 엘리먼트에 생성된 div를 추가하자
var divList = document.querySelector("#list") // 아이디가 "list"인 엘리먼트
divList.appendChild(divEle)소스
<body>
<button onclick="doAdd();">추가</button>
<div id="list"></div>
<script>
var count = 1;
function doAdd () {
var list = document.querySelector("#list");
// 방법2 - innerHTML (통째로 변경되는 개념)
list.innerHTML += "<h2>추가" + count++ + "</h2>";
/* 방법1 0 appendChild (끝부분만 추가)
var h2 = document.createElement("h2"); // <h2></h2>
var txt = document.createTextNode("추가" + count++); // 추가1, (추가2로 변경)
h2.appendChild(txt) // <h2>추가1</h2>
list.appendChild(h2); // id가 list인부분에..추가
*/
}
</script>
</body>결과
'개발 > JavaScript' 카테고리의 다른 글
| JavaScript - 엘리먼트의 속성 추가하기 2 (setAttribute) (0) | 2020.06.03 |
|---|---|
| JavaScript - 엘리먼트의 속성 추가하기 1 (0) | 2020.06.03 |
| JavaScript - 선택자 (Selector) (0) | 2018.12.04 |
| JavaScript - ES6 디스트럭처링(Destructuring) (0) | 2018.12.04 |
| JavaScript - ES6 객체의 프로퍼티 단축 (0) | 2018.12.04 |
댓글 영역