jQuery .append() creates two elements not one-CodePudding

The aim is to have the image displayed when there is no video source. It works, but it creates 2 image elements. How can I change the function, so that it will create only one img element?

Also, this will have to work for each video tag in the html dom. Thanks!

$(document).ready(function() {
$('video source[src=""]').each(function() {
  $("#video-cover").empty();
  $("#video-wrapper").append('<img id="theImg" src="https://uploads-ssl.webflow.com/6012ac684e954c060b8219fb/609bc7bbab390bac021906a5_ELEMENTE-04.svg" />');
 });
  });

#theImg {
width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="video-wrapper">
<div id="video-cover">
  <video width="100%" muted playsinline controls data-object-fit="contain">
   
    <source src="" type="video/mp4">
         <source src="" type="video/mp4">
     
    Your browser doesn't support HTML5 video tag.
  </video>  
</div>
</div>

CodePudding user response：

The problem is that you have 2 source with empty src in video tag so it will each it twice

You can use jQuery:first selector

$('video source[src=""]:first').each(function () {
    $("#video-cover").empty();
    $("#video-wrapper").append('<img id="theImg" width=50px height=50px src="https://uploads-ssl.webflow.com/6012ac684e954c060b8219fb/609bc7bbab390bac021906a5_ELEMENTE-04.svg" />');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="video-wrapper">
    <div id="video-cover">
        <video width="100%" muted playsinline controls data-object-fit="contain">
            <source src="" type="video/mp4">
            <source src="" type="video/mp4">
            Your browser doesn't support HTML5 video tag.
        </video>  
    </div>
</div>

If you have more than one video tag it's better to use classes and closest to find the closest parent

$('video').find('source[src=""]:first').each(function () {
    $(this).closest(".video-wrapper").append('<img id="theImg" width=50px height=50px src="https://uploads-ssl.webflow.com/6012ac684e954c060b8219fb/609bc7bbab390bac021906a5_ELEMENTE-04.svg" />');
    $(this).closest(".video-cover").empty();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    <div >
        <video width="100%" muted playsinline controls data-object-fit="contain">   
            <source src="" type="video/mp4">
            <source src="" type="video/mp4">     
            Your browser doesn't support HTML5 video tag.
        </video>          
    </div>
</div>
<div >
    <div >
        <video width="100%" muted playsinline controls data-object-fit="contain">   
            <source src="" type="video/mp4">
            <source src="" type="video/mp4">     
            Your browser doesn't support HTML5 video tag.
        </video>  
    </div>
</div>

P.S. I have added width and height for the images for better representation