반응형
HTML 문서에서 자바스크립트로 엘리먼트를 추가할 수 있습니다. Document.createElement() 메서드는 지정한 tagName의 HTML 엘리먼트를 만들어 반환합니다.
구문
let element = document.createElement(tagName[, options]);
매개변수
tagName
생성할 엘리먼트의 유형을 가리키는 문자열.
예) section, div, h1, p, button 등
반환 값
새로운 엘리먼트
var aChild = element.appendChild(aChild);
예제
아래 예제는 <body> </body> 엘리먼트 안쪽에 <section></section> 엘리먼트가 생성되어 추가됩니다.
<body>
<script>
var newSection = document.createElement('section');
document.body.appendChild(newSection);
</script>
</body>
다음 예제는 <body></body> 엘리먼트 안쪽에 <div></div> 엘리먼트를 생성합니다. <div></div> 엘리먼트 안쪽에는 "Hello World!"가 삽입됩니다.
<body>
<script>
var newDiv = document.createElement('div');
var newText = document.createTextNode("Hello World!");
newDiv.appendChild(newText);
document.body.appendChild(newDiv);
</script>
</body>
참고로 appendChild 메서드는 Node 객체만 받을 수 있기 때문에 "Hello World!" 텍스트를 넣지 않고, Document.createTextNode() 메서드를 활용하였습니다.
반응형
댓글