首页用vscode怎么将fetch得到的数据带格式渲染到HTML上

用vscode怎么将fetch得到的数据带格式渲染到HTML上

时间: 2024-03-24 17:41:13 浏览: 144

要将fetch得到的数据带格式渲染到HTML上，可以使用JavaScript的模板字符串和innerHTML属性来实现。下面是一个示例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Fetch API Demo</title> </head> <body> <div id="content"></div> <script src="app.js"></script> </body> </html> ``` JavaScript部分： ```javascript const contentDiv = document.querySelector('#content'); fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => { const title = data.title; const userId = data.userId; const completed = data.completed; const html = ` <h1>Title: ${title}</h1> <p>User ID: ${userId}</p> <p>Completed: ${completed}</p> `; contentDiv.innerHTML = html; }) .catch(error => console.error(error)); ``` 在JavaScript代码中，我们首先获取HTML页面上的id为“content”的div元素，然后使用fetch函数发送一个GET请求，获取JSON数据。在获取到数据后，我们使用模板字符串来生成HTML代码，并将其赋值给contentDiv元素的innerHTML属性，从而将数据渲染到HTML页面上。需要注意的是，由于fetch函数是异步的，因此我们需要使用Promise来处理响应数据。在then方法中，我们解析JSON数据，并使用模板字符串生成HTML代码，最后将其赋值给contentDiv元素的innerHTML属性。以上就是一个简单的示例代码，可以将fetch得到的数据带格式渲染到HTML上。希望对你有所帮助。

阅读全文