如何在 JavaScript 中单击时删除一个元素并替换第二个元素？答案

【问题标题】：How to remove an element and replace a second one on click in JavaScript?如何在 JavaScript 中单击时删除一个元素并替换第二个元素？
【发布时间】：2021-03-11 03:34:54
【问题描述】：

我正在尝试使用 HTML5 创建一个视频播放器，当点击播放时会全屏显示。

我找到了一个非常优雅的解决方案：

document.addEventListener('click', function (event) {
// Check if clicked element is a video thumbnail
var videoId = event.target.getAttribute('data-video');
if (!videoId) return;

// Create iframe
var iframe = document.createElement('div');
iframe.innerHTML = '<p>x</p><iframe width="165" height="146" src="https://www.youtube.com/embed/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
var video = iframe.childNodes[1];

// Replace the image with the video
event.target.parentNode.replaceChild(video, event.target);


// Enter fullscreen mode
video.requestFullscreen();
}, false);

在哪里

       <div class="wrapper" style="margin-bottom: 20px;border: 1px solid red;margin-right: 11px;">
             <p><img  data-video="example" alt="Play this video" src="/video/example.jpg" style="width: 164px; height: 114px;"></p>
            </div>

现在，当我尝试在其上添加播放按钮时，我做到了：

          <div class="wrapper" style="margin-bottom: 20px;border: 1px solid red;margin-right: 11px;">
             <p><img   src="/video/example.jpg" style="width: 164px; height: 114px;"></p>
            <div class="playpause" id="playButton" data-video="example" alt="Play this video"></div>
            </div>

所以它从播放按钮中获取数据。但是现在，视频缩略图不会被视频替换，而是在下面用 iframe 创建另一个。

如何在点击时移除播放按钮并替换图片？

【问题讨论】：

标签： javascript html html5-video html5-fullscreen

【解决方案1】：

你可以使用replaceWith方法

elementToBeReplaced.replaceWith(elementToReplaceWith);

或者你可以insertBefore elementToBeReplaced 然后 remove() 它。

elementToBeReplaced.parentElement.insertBefore(elementToReplaceWith, elementToBeReplaced);
elementToBeReplaced.remove();

【讨论】：

【解决方案2】：

我有两种方法可以做到这一点，它们都归结为给你想要隐藏display = none属性的div，你可以直接获取变量中的元素，然后更改它们的显示属性@ 987654321@.

或者在你的 CSS 文件中添加一个特殊的类，只给它display = none，然后将该类添加到你不想显示的 div 中，this example 显示如何打开和关闭该类.

【讨论】：