Bạn có thể sử dụng classList.add () cùng với append (). Sử dụng document.createElement () để tạo một div mới và classList.add () sẽ thêm lớp CSS. (. Class selector).
Ví dụ
<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> Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)” và nhấp chuột phải vào tệp. Chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Mã VS.
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi bạn nhấp vào nút “Thêm chủ đề” thì bạn sẽ nhận được kết quả sau.
Điều này sẽ tạo ra kết quả sau -
