आप एपेंड() के साथ classList.add() का उपयोग कर सकते हैं। एक नया डिव बनाने के लिए document.createElement() का उपयोग करें और classList.add() CSS वर्ग को जोड़ देगा।(.class चयनकर्ता)।
उदाहरण
<html lang="en>
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.add-all-subject {
display: grid;
height: 100px;
width: 100px;
grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
grid-template-rows: 2fr;
grid-column-gap: 5.9rem;
grid-row-gap: 2rem;
color: red;
border: 2px solid red;
}
</style>
</head>
<body>
<button onclick="saveAllSubjects()">Add Subjects</button>
<div id="add-subject">
</div>
<script>
const addSubjectArea = document.getElementById("add-subject");
function saveAllSubjects() {
const allSubject = document.createElement('div');
allSubject.classList.add('add-all-subject');
addSubjectArea.append(allSubject);
}
</script>
</body>
</html> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल नाम “anyName.html(index.html)” को सेव करें और फ़ाइल पर राइट क्लिक करें। वीएस कोड संपादक में "ओपन विद लाइव सर्वर" विकल्प चुनें।
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
जब आप "विषय जोड़ें" बटन पर क्लिक करेंगे तो आपको निम्न आउटपुट मिलेगा।
यह निम्नलिखित आउटपुट उत्पन्न करेगा -
