javascript - <li> 获取一些元素后消失

标签 javascript html html5-video

我正在尝试为视频播放器制作章节,但是,我遇到了一些困难。当您运行下面的代码时,测试 li 会与视频一起出现或不与视频一起出现,但如果取消注释这两行,li 就会消失。看起来页面没有在脚本之前加载,但我找到的解决方案对我没有帮助。有什么问题吗?

<!DOCTYPE html>

<html lang="ru">
    <head>
        <title>
            Video Player
        </title>
    </head>
    <body>
        <video id="video" width="800" height="600" autoplay controls>
            <source src="Video.mp4" type="video/mp4">
            <track id="track" src="Video.vtt" kind="chapters" srclang="en">
        </video>

        <ol id="Chapters">
            <!---There chapters will be--->
        </ol>

        <script type="text/javascript">
            // let Video = document.getElementById("video");
            // let Tracks = Video.getElementById("track");
            let Chapt = document.getElementById("Chapters");
            let Text = document.createTextNode("test");

            let li = document.createElement("li");
            Chapt.append(li);
            li.appendChild(Text);
        </script>
    </body>
</html>

最佳答案

这是因为 document.getElementById("video") 返回 DOM "Element" objectElement 对象没有 getElementById 方法,这只是因为 id 的值在文档中只能出现一次。

代码的修复方法是使用:document.getElementById("track")

关于javascript - <li> 获取一些元素后消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54432126/

相关文章:

javascript - 如何在一个 Bootstrap 处于事件状态时隐藏面板?

javascript - rgba 颜色 IE 8 的 jQuery 内联样式 rgb 回退

python - 如何在python上获取子链接

javascript - 以编程方式单击 div 根以打开使用 java 脚本在内部打开的内容

javascript - 使用 filereader 读取视频文件时如何获取视频时长?

javascript - 防止下载 HTML5 视频(右键保存)?

php - 如何检查使用 jquery 选中的多个复选框?

javascript - 无法通过键盘事件执行功能

javascript - 如何为引导下拉框设置焦点

javascript - 播放 HTML5 视频时无法加载 XML 文件