HTML 模板 - 分配 html 数据答案

【问题标题】：HTML template - assigning html dataHTML 模板 - 分配 html 数据
【发布时间】：2017-05-19 03:43:05
【问题描述】：

我第一次将 HTML 与 AJAX 调用结合使用。是否可以使用 JavaScript 将 html 数据分配给 div？

我有以下几点：

<template class="template result student">
    <div class="result student" data-category="student">
        <div class="box name">
            <span class="name">John Smith</span>
            <br />
            <span class="category">Student</span>
        </div>
    </div>
</template>

还有 JS

const studentTemplate = 
    document.querySelector(".template.result.student"),
    category = studentTemplate.dataset.querySelector(".result.student"),
    studentName = studentTemplate.content.querySelector(".box.name .name"),
    date = studentTemplate.content.querySelector(".box.dob .date");

   category.textContent    = "student";
   studentName.textContent = "student name";

如您所见，我正在尝试通过 JS 在模板中设置日期学生。但我明白了

studentTemplate.dataset.querySelector is not a function

问题是，这样做的正确方法是什么？设置内容工作正常

【问题讨论】：

查看我的更新答案以访问和修改 dataset 值。

标签： javascript html templates html-dataset

【解决方案1】：

您需要使用content 属性来访问模板的内容。

dataset 属性用于访问data- html 属性，后面是属性名称，如dataset.category。正如错误所述，querySelector() 不是从 dataset 属性返回的数据对象的有效方法。

const studentTemplate = document.querySelector(".template.result.student");
var category = studentTemplate.content.querySelector(".result.student");
var studentName = studentTemplate.content.querySelector(".box.name .name")
var dte = studentTemplate.content.querySelector(".box.dob .date");

// Modify the text content of the elements
category.textContent    = "teacher";
studentName.textContent = "teacher name";

// Modify the data-category attribute value of the the div
category.dataset.category = "teacher";
console.log(category);

<template class="template result student">
    <div class="result student" data-category="student">
        <div class="box name">
            <span class="name">John Smith</span>
            <br />
            <span class="category">Student</span>
        </div>
    </div>
</template>

【讨论】：