如何使用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

更换

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

随着

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

这样，你只需更换这已经有一个新的视频元素的视频元素。

Answer 2

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

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