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

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);

这种方式，您只需将已有的视频元素替换为新的视频元素即可。