Jquery pass attributes to a self-closed element with sub-elements

Question

I want to pass attributes to a self-closed element. However, it should contain a sub-element.

For example <a> with href=" variable-1" and as sub-element <img> with a src="variable-2" and class="variable-3".

I want to include data from my Firebase realtime database in the attributes.

var Gallery = firebase.database().ref().child("Gallery");


 Gallery.on("child_added", snap => {

     var img = snap.child("IMG").val();
     var link = snap.child("Link").val();
     var tag = snap.child("Tag").val();

     $("#Gallery").each(function () {
         $('<a>', {
             'href': link,
             appendTo: this
         });
     });
 });

I hope someone can help me :)

UPDATE:
I find a solution for me:

var GalleryWrap = document.getElementById("GalleryWrap");
 var Gallery = firebase.database().ref().child("Gallery");


 Gallery.on("child_added", snap => {

     var img = snap.child("IMG").val();
     var link = snap.child("Link").val();
     var tag = snap.child("Tags").val();
     var title = snap.child("Title").val();

     $("#GalleryWrap").each(function () {

         var LinkRef = document.createElement("a");
         LinkRef.setAttribute('href', link);


         var ImageBoxContainer = document.createElement("div");
         ImageBoxContainer.setAttribute('class', "imagecontainer " + tag);


         var ImageTitle = document.createElement("div");
         ImageTitle.setAttribute('class', "ImageTitle ");


         var Image = document.createElement("img");
         Image.setAttribute('src', img);
         Image.setAttribute('class', "imageboxes");


         GalleryWrap.appendChild(LinkRef);
         LinkRef.appendChild(ImageBoxContainer);
         ImageBoxContainer.appendChild(ImageTitle);

         ImageBoxContainer.appendChild(Image);
         ImageTitle.append(title);

     });
 });

Answer 1

You can easily provide and later access data set values as described below

const RTDB_DATA = {
 userName: 'Joe',
 userSurname: 'Black'
}

$("#Gallery").each(function () {
     $('<div>', 
     {
         href: 'https://stackoverflow.com/',
         text: `${RTDB_DATA.userName} ${RTDB_DATA.userSurname}`,
         appendTo: this,
         'data-user-name': RTDB_DATA.userName,
         'data-user-surname': RTDB_DATA.userSurname
     }).on('click', function () {
       console.log(this.dataset)
       console.log(this.dataset.userName)
       console.log(this.dataset.userSurname)
     })
});

#Gallery > div {
  text-decoration: underline;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Gallery">
Please click on the user name to see the results:
</div>