Templates and Data Attributes
Store inert markup templates and attach application-specific data without abusing classes.
The template element stores markup that is not rendered until JavaScript clones it. data-* attributes attach small pieces of application data to elements.
Clone a template
courses.html
<template id="course-template">
<article class="course-card">
<h2></h2>
<a>Open course</a>
</article>
</template>
<section id="courses"></section>
courses.js
const template = document.querySelector("#course-template");
const card = template.content.cloneNode(true);
card.querySelector("h2").textContent = "JavaScript";
document.querySelector("#courses").append(card);
Template contents are inert until inserted. They are useful for lightweight enhancement, but a rendering library may be clearer for a complex application.
Read application data
lesson.html
<button data-course="javascript" data-lesson="dom">Open lesson</button>
lesson.js
const button = document.querySelector("button[data-course]");
console.log(button.dataset.course, button.dataset.lesson);
Keep this
Use templates for reusable inert fragments, data attributes for small public values, classes for styling, and ARIA attributes for accessibility state.
学习位置已保存在此设备上。