Javascript 如何将对象作为内容附加到元素中？

我有一个简单的HTML结构：

<div class="bg">
  <video muted loop autoplay>
    <source type="video/mp4" src="video/filename.mp4"></source>
  </video>
</div>
<div class="bg">
  <video muted loop autoplay>
    <source type="video/mp4" src="video/filename.mp4"></source>
  </video>
</div>

我想通过jQuery将一个

元素附加到每个

元素中，每个元素的内容都是视频元素

为此，我做了：

$('#full_slider').find('.bg').each(function() {
    var video = $(this).find('video');
    $(this).append('<div class="cover" /><div class="cover" /><div class="cover" />');
    $(this).find('.cover').html(video);
});

$（'full#u滑块'）。查找（'.bg'）。每个（函数（）{
var video=$（this.find（'video'）；
$（此）。附加（“”）；
$（this.find（'.cover'）.html（视频）；
});

上面的代码（奇怪地）删除了最初的视频，与我一起生活：

<div class="bg">
  <div class="cover">
    <video muted="" loop="" autoplay="">
      <source type="video/mp4" src="video/eroi.mp4">
    </video>
  </div>
  <div class="cover">
    <video muted="" loop="" autoplay="">
      <source type="video/mp4" src="video/eroi.mp4">
    </video>
  </div>
  <div class="cover">
    <video muted="" loop="" autoplay="">
      <source type="video/mp4" src="video/eroi.mp4">
    </video>
  </div>
</div>

期望（预期）输出为：

<div class="bg">
 <video muted loop autoplay>
   <source type="video/mp4" src="video/filename.mp4"></source>
  </video>
  <div class="cover">
    <video muted="" loop="" autoplay="">
      <source type="video/mp4" src="video/eroi.mp4">
    </video>
  </div>
  <div class="cover">
    <video muted="" loop="" autoplay="">
      <source type="video/mp4" src="video/eroi.mp4">
    </video>
  </div>
  <div class="cover">
    <video muted="" loop="" autoplay="">
      <source type="video/mp4" src="video/eroi.mp4">
    </video>
  </div>
</div>

---

我的错误在哪里？

如果要将视频添加到现有HTML代码中，最好的方法可能不是使用jQuery动态添加视频。jQuery应该主要用于格式化AFAIK。。。。。最简单的方法可能是使用编辑器查找和替换。我的意见是，它可以节省您的开销….

问题在于

$（这个）您的html不正确，请尝试将其更改为
$（this）
并添加
$（this.html（“”）
以在添加内容之前清除它


$（“.doit”）。在（'click'，function（）上{
$（'full#u slider'）。查找（'.bg'）。每个（函数（）{
var video=$（this.find（'video'）；
$（this.html（“”）；
$（此）。附加（“”）；
$（this.find（'.cover'）.html（视频）；
$（this）.find（'video'）.trigger（'play'）；
});
});
按钮{
位置：绝对位置；
排名：0；
右：0；
}

从外观上看，你可以做到这一点。这就是你想要的

$('#full_slider > .bg').append("<div class='cover'/>");
$('#full_slider > .bg > .cover').html(video);

$（'full#u slider>.bg'）。追加（“”）；
$（'#完整滑动条>.bg>.cover'）.html（视频）；
你能看看这是不是你想要的吗？我们的想法是
克隆（）
视频元素，因为它只是被
移动到
封面的内容中


$（文档）.ready（函数（）{
$（'full#u slider'）。查找（'.bg'）。每个（函数（）{
var video=$（this.find（'video'）.clone（）；
$（此）。附加（“”）；
$（this.find（'.cover'）.html（视频）；
});
});

描述不太清楚。为了加快速度，预期的HTML输出是什么？@dysfunc我编辑了我的问题。问题出在
$（this.append（“”）这样做的正确方法是在代码片段中，保留您已有的内容，这意味着保持相同的行为。每个视频需要3份副本。确定更新。你现在有3份。我玩的时候换了。