将数据从 api 附加到 DOM答案

【问题标题】：Appending data from api into DOM将数据从 api 附加到 DOM
【发布时间】：2021-07-17 03:19:22
【问题描述】：

const url = `https://catfact.ninja/fact?max_length=140`;

const getFact = () => {
  return fetch('https://catfact.ninja/fact?max_length=140')
  .then(res => res.json())
}

const createFactDiv = (fact) => {
  const factContainer = document.createElement('div')
  const setup = document.createElement('p')

  setup.innerText = fact.fact

  factContainer.append(setup)

  return factContainer
}

const appendFact = (factDiv) => {
  const factContainer = document.getElementById('factContainer')
  factContainer.append(FactDiv)
}

document.addEventListener('DOMContentLoaded', () => {

})

getFact().then ((fact) => {
  const FactDiv = createFactDiv(fact)
  append.fact (FactDiv)
})

我已经尝试了几件事，对 JS 来说还很新，而且很棘手。我正在尝试创建一个显示猫事实的应用程序。我在 DOM 的元素中的 console.log 中正确地看到了带有 FACT 的 DIV，但现在我看不到它，我一直看到 Uncaught (in promise) ReferenceError: append is not defined 知道该怎么做吗？非常感谢！

【问题讨论】：

问题是append.fact(FactDiv)，浏览器不知道append是什么，因为没有这样的变量。你的意思是appendFact 吗？

标签： javascript json api append

【解决方案1】：

是的，这是我们的老朋友拼写错误！这是一些工作代码：


const url = `https://catfact.ninja/fact?max_length=140`;

const getFact = () => {
  return fetch('https://catfact.ninja/fact?max_length=140')
  .then(res => res.json())
}

const createFactDiv = (fact) => {
  const factContainer = document.createElement('div');
  const setup = document.createElement('p');

  setup.innerText = fact.fact;

  factContainer.append(setup);

  return factContainer
}

const appendFact = (factDiv) => {
  const factContainer = document.getElementById('factContainer');
  factContainer.append(factDiv);
}

//This is unused
/*
document.addEventListener('DOMContentLoaded', () => {
})
*/

getFact().then ((fact) => {
  const factDiv = createFactDiv(fact);
  appendFact(factDiv);
})

这就是始终使用 camelCase 很重要的原因：

在 appendFact() 中，您采用了 factDiv 参数，但随后尝试使用该函数中不存在的 FactDiv
如 Robin 所述，您输入的是 append.fact(FactDiv) 而不是 appendFact(FactDiv)
这应该重构为 appendFact(factDiv) 以坚持使用 camelCase。
还要注意你的间距，我也喜欢在行尾加上分号！

【讨论】：