라이브러리
[JAVASCRIPT] document.createElement(tagName) - 새로운 요소 생성
document.createElement(tagName)란?
`document.createElement(tagName)`은 HTML 요소를 생성하는 메서드입니다. 이 메서드는 지정한 태그 이름으로 HTML 요소를 생성하고, 생성된 요소를 문서의 DOM 트리에 추가합니다.
사용법
`document.createElement(tagName)`은 다음과 같이 사용할 수 있습니다.
#hostingforum.kr
javascript
const 요소 = document.createElement('태그이름');
예를 들어, `div` 태그를 생성하는 코드는 다음과 같습니다.
#hostingforum.kr
javascript
const div = document.createElement('div');
예제
다음 예제에서는 `div` 태그를 생성하고, 생성된 요소에 텍스트를 추가합니다.
#hostingforum.kr
javascript
// div 태그를 생성합니다.
const div = document.createElement('div');
// div 태그에 텍스트를 추가합니다.
div.textContent = 'Hello, World!';
// div 태그를 문서의 BODY 요소에 추가합니다.
document.body.appendChild(div);
이 코드를 실행하면, 브라우저의 BODY 요소에 `div` 태그가 생성되어 텍스트 "Hello, World!"가 표시됩니다.
추가적인 예제
다음 예제에서는 `button` 태그를 생성하고, 생성된 요소에 이벤트 리스너를 추가합니다.
#hostingforum.kr
javascript
// button 태그를 생성합니다.
const button = document.createElement('button');
// button 태그에 텍스트를 추가합니다.
button.textContent = '클릭하세요';
// button 태그에 클릭 이벤트 리스너를 추가합니다.
button.addEventListener('click', () => {
console.log('버튼이 클릭되었습니다.');
});
// button 태그를 문서의 BODY 요소에 추가합니다.
document.body.appendChild(button);
이 코드를 실행하면, 브라우저의 BODY 요소에 `button` 태그가 생성되어 텍스트 "클릭하세요"가 표시됩니다. 버튼을 클릭하면, 콘솔에 "버튼이 클릭되었습니다."라는 메시지가 출력됩니다.
요약
`document.createElement(tagName)`은 HTML 요소를 생성하는 메서드입니다. 이 메서드는 지정한 태그 이름으로 HTML 요소를 생성하고, 생성된 요소를 문서의 DOM 트리에 추가합니다. 예제를 통해 `div` 태그와 `button` 태그를 생성하고, 생성된 요소에 텍스트를 추가하고 이벤트 리스너를 추가하는 방법을 살펴보았습니다.
댓글목록
등록된 댓글이 없습니다.