appendTo adds element to another one, but it does not show on the website-CodePudding

I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?

Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc

//Gallery Lightbox made with Jquery

    let gallery = $('#gallery'),
        overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
 
        //Opens the lightbox with chosen image
    gallery.find('a').on("click", function(event){
      event.preventDefault();
     let href = $(this).attr('href'),
        image = $('<img>', {src: href}),
        larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
        rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW

        image.appendTo(overlay);
        larrow.appendTo(image);

         overlay.show();

         //Closes the Lightbox with the image, by clicking on the overlay
         $(document).on("click", "#overlay", function(){

          overlay.hide();
          image.remove();
        })

      })

.gallery {
      display: none;
      opacity: 0;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 1004px;
      margin: 0 auto;
    }

    .gallery img {
      position: relative;
      top: 100px;
      height: 200px;
      width: 300px;
      margin: 0 1em;
    }

    #overlay {
      background: rgba(0, 0, 0, .7);
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      text-align: center;
      z-index: 10;
    }

    #overlay img {
      margin-top: 5%;
      border: solid 5px white;
      border-radius: 5px;
    }
    
    
    //Dont mind these, the silly values are just for testing purposes
    
    #larrow {
      font-size: 500px;
      color: red;
      z-index: 2000;
    }

    #rarrow {
      font-size: 500px;
      color: red;
      z-index: 2000;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="gallery">
        <a href="img\placeholder1.jpg"><img src="img\placeholder1.jpg" alt=""></a>
        <a href="img\placeholder2.jpg"><img src="img\placeholder2.jpg" alt=""></a>
        <a href="img\placeholder3.jpg"><img src="img\placeholder3.jpg" alt=""></a>
        <a href="img\placeholder4.jpg"><img src="img\placeholder4.jpg" alt=""></a>
        <a href="img\placeholder5.jpg"><img src="img\placeholder5.jpg" alt=""></a>
        <a href="img\placeholder6.jpg"><img src="img\placeholder6.jpg" alt=""></a>
     </div>  
</body>

CodePudding user response：

You have a few errors in your code. Instead of

larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW

You should write it like this. There is no need for the '=' between div and id.

larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW

The same goes for the following tags:

overlay = $('<div id = "overlay"></div>').appendTo('body').hide();

Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:

<div id="overlay">
    <img src ... </img>
    <div id = "larrow"> < </div>
    <div id = "rarrow"> > </div>
</div>

Refer to Floating Div Over An Image to see the needed css.