提问人：Jeff 提问时间：7/13/2017 最后编辑：Jeff 更新时间：7/13/2017 访问量：344
jQuery onclick 创建并附加具有属性和子项的元素
jQuery onclick create and append element with attributes and children
问：
我有一个页面，其中许多指向不同的视频文件，其中一个：anchorsdiv
<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>
当用户单击链接时，我希望在 中创建一个元素，如下所示：videodiv
<div id="video-player">
<video>
<source src="[HREF-FROM-THE-A]">
</video>
</div>
我需要元素上的属性。controlsautoplayvideo
我需要向锚点添加类吗？我是这么想的......因为我在页面上还有其他不是视频的链接。更新了问题。
这对某人来说应该很容易，我对 JS/jquery 很糟糕。我尝试搜索：“jquery create element onclick”、“jquery append element onclick”。
答：
1赞
Isac
7/13/2017
#1
您可以监听点击并使用该方法注入所需的视频标签。可以使用jquery的方法获取该值，并结合单击的：<a>htmlhrefattr$(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>
0赞
Akshit Ahuja
7/13/2017
#2
将锚标记替换为：
<a href="javascript:void(0);" class="video" onclick="addvideo('http://www.example.com/example-1.mp4')">1</a>
<a href="javascript:void(0);" class="video" onclick="addvideo('http://www.example.com/example-2.mp4')">2</a>
<a href="javascript:void(0);" class="video" onclick="addvideo('http://www.example.com/example-3.mp4')">3</a>
然后添加一个 javascript 函数：
function addvideo(href)
{
$('#video-player').html('<video controls autoplay><source src="'+href+'"></video>');
}
评论
.data()<template>元素和shadow-dom的一个很好的用例，它可以让您将 html 结构排除在 javascript 代码之外。