HTML模板-分配html數據

Question

我是第一次結合AJAX調用使用HTML。 是否可以使用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

問題是，這樣做的正確方法是什么？ 設置內容效果很好

Answer 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>