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

Question

我正在尝试为视频播放器制作章节，但是，我遇到了一些困难。当您运行下面的代码时，测试 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>

Answer 1

那是因为 document.getElementById("video") 正在返回一个 DOM "Element" object。 Element 对象没有方法 getElementById，这只是因为 id 的值在文档中应该只出现一次。

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

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

<li> disappearance after getting some elements

html

javascript

html5-video