这篇博客展示了如何使用JavaScript的fetch API从远程URL获取编程语言列表，并将其动态加载到HTML页面的无序列表中。通过响应式编程处理HTTP请求，将接收到的文本内容分割为数组，然后遍历数组创建并添加列表项。
问题描述
<html>
<head>
</head>
<body>
<h2>A few programming languages</h2>
<ul id="languageList">
</ul>
</body>
</html>预期输出：
解决办法
我的：
//Write-Your-Code-Here
fetch(
"https://raw.githubusercontent.com/bpesquet/thejsway/master/resources/languages.txt"
)
.then(reponse => reponse.text())
.then(text =>{
const languageArray = text.split(";");
const languageListElement = document.getElementById("languageList");
languageArray.forEach(language =>
{
const languageElement = document.createElement("li");
languageElement.textContent = language;
languageListElement.appendChild(languageElement);
});
})
.catch(err => {
console.error(err.message);
});参考答案：
fetch(
"https://raw.githubusercontent.com/bpesquet/thejsway/master/resources/languages.txt"
)
.then(response => response.text()) // Access and return response's text content
.then(text => {
const languages = text.split(";");
const listElement = document.getElementById("languageList");
languages.forEach(language => {
// Create the list item for the language
const languageElement = document.createElement("li");
languageElement.textContent = language;
// Add the item to the list
listElement.appendChild(languageElement);
});
})
.catch(err => {
console.error(err.message);
});
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
