HTML模板-分配html数据

Question

我第一次将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在模板中设置date-student。但我得到了

studentTemplate.dataset.querySelector is not a function

问题是，这样做的正确方法是什么？设置内容效果很好

Answer 1

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

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

​

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>

​