避免使用 innerHTML 添加的嵌入在 div 中的媒体进行刷新,可以使用 document.createElement 方法和 appendChild 方法来动态创建和添加媒体元素。以下是一个使用 JavaScript 解决这个问题的示例代码:
HTML:
JavaScript:
// 创建一个媒体元素
var mediaElement = document.createElement("video");
mediaElement.src = "video.mp4";
mediaElement.controls = true;
// 获取媒体容器
var mediaContainer = document.getElementById("mediaContainer");
// 清空容器
mediaContainer.innerHTML = "";
// 将媒体元素添加到容器中
mediaContainer.appendChild(mediaElement);
这个示例中,首先使用 document.createElement 方法创建一个 video 元素,并设置其相关属性。然后通过获取媒体容器的引用,清空容器的 innerHTML,避免使用 innerHTML 添加嵌入的媒体元素。最后,使用 appendChild 方法将媒体元素添加到容器中。
通过这种方式创建和添加媒体元素,可以避免 innerHTML 的刷新问题,并确保媒体元素正确地显示在 div 中。同时,这种方式也更加符合最佳实践,提高了代码的可维护性和可读性。