JavaScript에서 클래스가 있는 요소 만들기
이 기사에서는 JavaScript 함수를 사용하여 HTML 요소를 생성합니다. 버튼 클릭 이벤트에서 함수를 호출하고 클래스가 있는 요소를 생성합니다.
JavaScript에서 요소 만들기
document.createElement()는 HTML 태그 이름의 매개변수를 문자열로 받아 HTML 요소 유형 노드를 생성하는 기본 메소드입니다.
HTML 요소를 만들고 이것을 사용하여 DOM 트리에 첨부할 수 있습니다. 스타일을 지정하기 위해 id, 콘텐츠 및 CSS를 할당하고 해당 요소를 HTML 페이지의 본문에 추가할 수 있습니다.
기본 구문:
let myElement = document.createElement(anyTag);
JavaScript에서 클래스가 있는 요소 만들기
classList.add() 메서드를 사용하여 클래스가 있는 HTML 요소를 만들 수 있습니다. 또한 해당 방법을 사용하여 요소에 둘 이상의 클래스를 추가할 수 있습니다.
메소드 add()는 클래스가 HTML 요소에 이미 있는 경우 해당 클래스를 전달합니다. appendChild() 메소드를 사용하여 HTML 본문에 요소 노드를 추가할 수 있습니다.
클래스 구문:
element.classList.add('bg-red', 'text-lg')
예시:
<!DOCTYPE html>
<html>
<style>
.mystyle {
background-color: yellow;
padding: 10px;
}
</style>
<body>
<h1>Delftstack learning</h1>
<h2>Create element with class using JavaScript</h2>
<p>Click the button to create an element:</p>
<button onclick="createFunction()">Create</button>
<script>
function createFunction() {
let myDiv = document.createElement('div'); // element creation
myDiv.classList.add('mystyle'); // adding class
let content = document.createTextNode('This is a text content of an element!'); // text content
myDiv.appendChild(content); // append text content to element
document.body.appendChild(myDiv) // append element to body
}
</script>
</body>
</html>
위의 HTML 소스에서 button 요소를 만들고 해당 버튼의 클릭 이벤트에서 createFunction()을 호출했습니다. 해당 함수에서 document.createElement('div') 메서드를 사용하여 div 요소를 만들고 변수 myDiv에 저장합니다.
그런 다음 myDiv.classList.add('mystyle') 메서드를 사용하여 해당 요소에 mystyle 클래스를 추가하고 document.createTextNode()를 사용하여 표시할 텍스트 콘텐츠를 추가하고 myDiv에 추가했습니다.
마지막으로 document.body.appendChild(myDiv)를 사용하여 HTML 소스의 본문에 요소를 추가합니다. 위의 소스를 html 확장자로 저장하고 브라우저에서 열어서 예제를 테스트할 수 있습니다.