从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”的标签。