文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么replaceChild会导致问题？

问为什么replaceChild会导致问题？
EN

Stack Overflow用户

提问于 2022-08-09 00:48:08

回答 1查看 50关注 0票数 0

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上传。它想让我添加更多的文本。对不起，太匆忙了。

bootstrap-5

javascript

html

回答 1

Stack Overflow用户

发布于 2022-08-09 15:32:48

当您替换元素时，您需要给它它要替换的元素的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);
    })
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73285416

复制

相似问题

问为什么replaceChild会导致问题？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么replaceChild会导致问题？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么replaceChild会导致问题？
EN