javascript - jQuery onclick 创建并附加带有属性和子元素的元素

Question

我有一个页面，其中有许多指向不同视频文件的 anchor 和一个div:

<a href="http://www.example.com/example-1.mp4" class="video">1</a>
<a href="http://www.example.com/example-2.mp4" class="video">2</a>
<a href="http://www.example.com/example-3.mp4" class="video">3</a>

<div id="video-player">

</div>

当用户单击链接时，我希望在 div 内创建一个 video 元素，如下所示:

<div id="video-player">
    <video>
        <source src="[HREF-FROM-THE-A]">
    </video>
</div>

我需要 video 元素上的 controls 和 autoplay 属性。

我需要向我的 anchor 添加一个类吗？我想是这样......因为我的页面上有其他不是视频的链接。更新了问题。

这对某人来说应该很容易，我对 JS/jquery 很糟糕。我尝试搜索:“jquery create element onclick”、“jquery append element onclick”。

Answer 1

您可以监听 <a> 上的点击并使用 html方法来注入(inject)您需要的视频标签。 href可以使用 jquery 的 attr 获取值方法，结合$(this)被点击<a> :

$("a.video").click(function(event){
  event.preventDefault();
  $("#video-player").html("<video controls src=" + $(this).attr("href") + "></video>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://www.example.com/example-1.mp4">1</a>
<a href="http://www.example.com/example-2.mp4">2</a>
<a href="http://www.example.com/example-3.mp4">3</a>

<div id="video-player">

</div>

我还添加了controls在生成的<video>上以便更清楚地了解它的创建。