如何在JavaScript中删除一个元素并替换第二个点击?

Question

我试图在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下面创建另一个。

我怎么能，在点击，删除播放按钮并取代图像代替?

Answer 1

您可以使用replaceWith方法

elementToBeReplaced.replaceWith(elementToReplaceWith);

或者你可以先插入元素，然后移除()。

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

Answer 2

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

或者在你的CSS文件中添加一个特殊的类，只给它display = none，并将这个类添加到你不想显示的div中，这个例子展示了如何切换类的打开和关闭。