從javascript顯示html模板標簽上的數據

Question

我正在嘗試從 javascript 將數據顯示到 html 模板標簽。 我可以將圖像從 javascript 顯示到模板，但是當我在 p 標簽中嘗試同樣的事情時，它給了我一個TypeError: Cannot set property 'innerText' of null 。 沒有任何效果，我嘗試使用 text/textContent/inner/innerHTML。 有什么我在這里想念的嗎？

索引.html

<template id="product-template">
    <div class="col-sm-4">
      <div class="card border-light">
        <ul class="list-group list-group-flush">
          <li class="list-group-item"><img class="card-img-top" src="" id="product-img"></li>
          <li class="list-group-item"><p id="product-name">Name: </p></li>
          <li class="list-group-item"><p id="product-brand">Brand: </p></li>
          <li class="list-group-item"><p id="product-price">Price: </p></li>
          <li class="list-group-item"><p id="product-description">Description: </p></li>
        </ul>
      </div>
    </div>
</template>


<div class="container">
  <h1>Shop Online</h1>
  <div id="appRoot" class="row"></div>
</div>

腳本.js

const template = document.getElementById('product-template');
const card = document.querySelector('#appRoot');
length=8;
for(let index=0; index<length; index++){
  var clone = template.content.cloneNode(true);
  var image = clone.querySelector("li");
  var path = "/images/"
  image.querySelector("#product-img").src = path + data.imagepath;
  var name = clone.querySelector('p');
  name.querySelector('#product-name').innerText = data.name;
  card.appendChild(clone);

Answer 1

您可能不需要查詢 p 標簽，因為無論如何您都是在下一行中通過 id 來獲取它們的。

var name = clone.querySelector('p');
name.querySelector('#product-name').innerText = data.name;

如果您理解我的話，該代碼看起來正在尋找這樣的東西：

<li class="list-group-item"><p><p id="product-name">Name:</p></p></li>

innerText 為空，因為<p>標簽中沒有 id 為“product-name”的標簽。