JS中创建的元素上的textContent不起作用？

Question

我正在处理一项学校任务，但最近遇到了一个 textContent 问题。我导入一个 JSON 文件并将数据用作 foreach。 .js 文件中没有错误，但我收到 typeError: cannot set property 'textContent' of undefined, 即使我使用 JSON 文件中的元素定义了属性？

当我删除带有 textContent 的两行时，我收到与 appendChild 属性类似的错误：无法读取 null 的属性 'appendChild'。

如果我在 forEach 中记录 coffee.name，我会得到正确的名字。我猜我只有一个名字，因为 forEach 不能进一步循环，因为错误更远。

我的js代码：

    import './style.css';
    import data from './assets/data/coffees.json';

  const init = () => {
 console.log(data);
 createPriceList(data);
};

const createPriceList = coffees => {
const ul = document.querySelector('prices__list');
console.log(coffees);

coffees.coffees.forEach(coffee => {
 if (coffee.plantbased === true) {
  const price = document.createElement('li');
  price.classList.add('price');
  const a = document.createElement('a').classList.add('price__button');
  const spanWrapper = document.createElement('span').classList.add('price__button__wrapper');
  const spanName = document.createElement('span').classList.add('price__button__name');
  const spanAmount = document.createElement('span').classList.add('price__button__amount');
  const spanPlus = document.createElement('span').classList.add('price__button__plus');

  spanName.textContent = coffee.name;
  spanAmount.textContent = coffee.prices.medium;

  ul.appendChild(price);
  price.appendChild(a);
  a.appendChild(spanWrapper);
  spanWrapper.appendChild(spanName);
  spanWrapper.appendChild(spanAmount);
  a.appendChild(spanPlus);
  }
  });
 };

init();

这是我正在尝试创建的 HTML（注释中的部分，其余部分已定义）：

<section class="prices highlight spaced">
  <h2 class="visually-hidden">Price list</h2>
  <ul class="prices__list">
  <!--<li class="price">
        <a class="price__button">
          <span class="price__button__wrapper">
            <span class="price__button__name">Oat Latte</span>
            <span class="price__button__amount">&euro; 2</span>
          </span>
          <span class="price__button__plus">+</span>
        </a>
      </li> -->
  </ul>
</section>

Answer 1

您正在尝试像这样将方法链接在一起：

const test = document.createElement('span').classList.add('price__button__name');
console.log(test.classList);

但是，您必须先创建元素，然后才能使用其 classList 或其他属性：

const test = document.createElement('span');
test.classList.add('price__button__name');
console.log(test.classList);