Question

我已经创建了下面的函数来创建一个视频元素的加载但是如何让javascript再次删除它或者在加载后替换元素？我还有另外两个这样的功能，只是加载不同的视频。当其他两个函数中的任何一个被调用时，我希望这些元素消失，因此可以看到新的视频元素。

function createVideo1(){
//alert("createSmallVideo has been called");  
var video = document.createElement("video");
video.setAttribute("id", "VideoElement");
video.setAttribute("src", "videos/surfing with friends.ogv");
video.setAttribute("controls", ""); 
video.setAttribute("width", "480");
video.setAttribute("height", "300");
document.getElementById("VideoContainer").appendChild(video);
video.play();
}

Answer 1

您可以删除使用此功能创建的当前视频元素。只需在创建新视频元素并插入之前调用它。

function removeVideo() {
    var video = document.getElementById("videoElement");
    video.parentNode.removeChild(video);
}

Answer 2

替换

document.getElementById("VideoContainer").appendChild(video);

使用

var container = document.getElementById("VideoContainer");
container.replaceChild(video, container.firstElementChild);

这样您只需用新的视频元素替换已存在的视频元素。

如何使用javascript替换或删除这些元素

2 个答案: