如何向https://my-ocular.jeffalo.net/api/users/PoIygon并显示";"状态";在状态上;颜色";是id"的背景色;颜色";以及";name";这个html代码上有名字吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YAY</title>
<link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
<div class="wrapper">
<span id="name">name</span>
/
<span id="status">
status
<div id="color">css background is the color</div>
</span>
</div>
</body>
</html>
我的解决方案是使用fetchapi并动态创建内容。你的html有一个小问题,div
元素不能是span
元素的子元素,所以我稍微修改了一下。我希望这对你有用。
const wrapper = document.querySelector('.wrapper');
function createContent(data) {
const content = `
<div id="color" style="background-color: ${data.color};">
<span id="name">${data.name}</span>
/
<span id="status">${data.status} </span>
</div>
`;
wrapper.insertAdjacentHTML('beforeend', content);
}
fetch('https://my-ocular.jeffalo.net/api/user/PoIygon')
.then(response => response.json())
.then(data => createContent(data))
.catch((error) => console.log(error));
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YAY</title>
<link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
<div class="wrapper">
<!-- add JS dynamically here -->
</div>
</body>
</html>