function httpGet(theUrl) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}
var videosT = httpGet("https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=abcxyz&maxResults=6&order=date&type=video&key=abcxyz");
const videos = JSON.parse(videosT);
for (let step = 0; step < 6; step++) {
fetch('js/videos.html')
.then(res => res.text())
.then(text => {
let oldelem = document.getElementById("vid_" + step);
let newelem = document.createElement("div");
newelem.innerHTML = text;
oldelem.parentNode.replaceChild(newelem, oldelem);
})
}
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ashk3000</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body class="d-flex flex-column" viewport-fit=cover>
<!-- Navbar -->
<script id="navbar_placeholder" src="js/nav.js" page="home"></script>
<!-- Headers -->
<div
class="d-none d-lg-block shadow bg-body border border-5 border-top-0 rounded-bottom w-75 position-relative start-50 translate-middle-x mb-5">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Home</h1>
</div>
</div>
<div class="d-lg-none shadow-sm bg-body border-bottom border-5 w-100 position-relative mb-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Home</h1>
</div>
</div>
<!-- Start -->
<div class="container">
<div class="row">
<div id="vid_0"></div>
<div id="vid_1"></div>
<div id="vid_2"></div>
<div class="w-100"></div>
<div id="vid_3"></div>
<div id="vid_4"></div>
<div id="vid_5"></div>
</div>
</div>
<script src="js/videos.js"></script>
<!-- Footer -->
<div class="mt-auto"></div>
<script id="footer_placeholder" src="js/footer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
crossorigin="anonymous"></script>
</body>
</html>
videos.html:
<div class="card col" style="width: 18rem;">
<img src="" id="thumbnail" class="card-img-top" alt="">
<div class="card-body">
<h5 id="title" class="card-title">Title</h5>
<a href="#" id="button" class="btn btn-primary stretched-link">Watch</a>
</div>
</div>
你好，我收到回复"；未找到"；当我尝试这个代码时，屏幕。我认为这与replaceChild有关。我是java脚本的新手，不知道发生了什么。很多都来自互联网。我正试图让它显示最近上传的youtube。它希望我添加更多的文本。对不起，这太仓促了。
当您替换元素时，您需要为其提供要替换的元素的ID，以便下次能够找到它。
for (let step = 0; step < 6; step++) {
fetch('js/videos.html')
.then(res => res.text())
.then(text => {
let oldelem = document.getElementById("vid_" + step);
let newelem = document.createElement("div");
newelem.id = oldelem.id; // copy the ID.
newelem.innerHTML = text;
oldelem.parentNode.replaceChild(newelem, oldelem);
var pic = document.getElementById('thumbnail');
pic.classList.add('thumbnail_' + step);
pic.id = "thumbnail_" + step;
pic.setAttribute('src', videos.items[step].snippet.thumbnails.high.url);
})
}
或者，您可以只更新旧元素的innerHTML，而不是替换该元素。
for (let step = 0; step < 6; step++) {
fetch('js/videos.html')
.then(res => res.text())
.then(text => {
let oldelem = document.getElementById("vid_" + step);
oldelem.innerHTML = text;
var pic = document.getElementById('thumbnail');
pic.classList.add('thumbnail_' + step);
pic.id = "thumbnail_" + step;
pic.setAttribute('src', videos.items[step].snippet.thumbnails.high.url);
})
}