adding text to an image, no canvas, vanilla javascript

I am working on a meme generator project, it's to practice DOM manipulation. So, I'm supposed to use vanilla JavaScript and no canvas. I'm having trouble finding answer with these parameters. I am almost done with the project, I just need to add text to the picture that they submitted.

I have tried using innerText and innerHTML they seem to just replace it. I've tried append child, similar to how I got the appendchild with the image, but I either get an error or replace the image.

I was pretty sure that I needed to add it add the picture with JavaScript then style it with CSS. Maybe just add a class with classList.

console.log('Currentfile: memegenerator');
let img = document.getElementsByTagName('img');

addEventListener('submit', function(e) {
      e.preventDefault();

      let UIurl = document.getElementById('picurl');
      let memeToBe = UIurl.value;

      let img = document.createElement('img');
      img.setAttribute('src', memeToBe);
      img.setAttribute('class', 'meme');

      // append to the document with set attribute using said variable
      let memeLocation = document.getElementById('location');
      memeLocation.appendChild(img);

      //url for pic test
      //https://www.fillmurray.com/640/360

      //add text to image
      //get text values
      let inputText = document.getElementById('text_top');
      let textValue = inputText.value;

      addEventListener('click', function(e) {
        let clickedElement = e.target;
        console.log(clickedElement);

        let targetCheck = clickedElement.classList.contains("meme");

        if (targetCheck) {
          clickedElement.remove();
        }
      })

h1 {
  color: navy;
}

.center {
  text-align: center;
}

.main {
  width: 50%;
  margin: 0 auto;
  background-color: lightblue;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.meme {
  width: 99%;
  /* margin: 2 auto; */
  justify-content: center;
  background-color: lightblue;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

main:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

meme:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

body {
  background-color: #f0feff;
}

.button {
  float: right;
}


/* divider styles */

hr.rounded {
  border-top: 2px solid #bbb;
  border-radius: 5px;
  width: 90%;
}

.border_lower {
  border-bottom: 1px solid #bbb;
  border-radius: 5px;
  width: 90%;
}


/* form styles */

form {
  width: 60%;
  margin: 0 auto;
}

form input {
  margin: 2px;
}

form label {
  margin: 2px;
}


/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text */

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}


/* Top left text */

.location {
  position: absolute;
  top: 8px;
  left: 16px;
}

<main class="main">
  <h1 class="center">MEME GENERATOR!</h1>
  <hr class="rounded" />
  <form action="#" class="form">
    <label for="text_top">Text Upper:</label>
    <input type="text" name="text_top" id="text_top" /><br />
    <label for="text_lower">Text Lower:</label>
    <input type="text" name="text_lower" id="text_lower" /><br />
    <label for="picturl">Picture:</label>
    <input type="url" name="picurl" id="picurl" /><br /><br /><br />
    <input class="button " type="submit" value="Add Meme:" /><br />
    <hr />
  </form>
  <div id="location"></div>
  <hr class="border_lower" />
  <p class="center"><small>Thanks for visiting!</small></p>
</main>

Solution

Since this isn't about saving the images but just for display purposes, I got it working.

The main problem that you were having is your approach seemed to focus more on the javascript side of things but missed out on the CSS part of it.

There are multiple ways to put images behind text, the most common two are:

Setting the images as a background image on the parent element (ie div) then just setting the text within that element
Using CSS to absolute position the text on the image and use z-index to layer them

For my answer I chose #2.

Besides misc code clean ups, the main function that I did was:

I created a div, and gave it a class of meme
I added the image to that div
I added the top and bottom text to their own divs and append those to the meme div
Using CSS, I positioned the top and bottom text above the image

A few other things, when adding an eventListeners unless it is absolutely needed, I recommend tying them to a specific element and not just the document (or nothing at all which I believe is document anyway). By applying it to the document, any click will be processed, but by tying it to the element, only clicks on that element will be processed.

console.log('Currentfile: memegenerator');
let img = document.getElementsByTagName('img');
let form = document.querySelector('form');

form.addEventListener('submit', function(e) {
      e.preventDefault();
      let meme = document.createElement("div");
      let top_text = document.createElement("div");
      let bottom_text = document.createElement("div");
      let img = document.createElement("img");
      
      let btn = document.createElement("button");
      btn.setAttribute("type","button");
      
      img.src = document.getElementById('picurl').value;
      top_text.classList.add("top_text");
      top_text.innerHTML = document.getElementById('text_top').value;
      
      bottom_text.classList.add("bottom_text");
      bottom_text.innerHTML = document.getElementById('text_lower').value;
      
      btn.innerHTML = "REMOVE";
      
      meme.classList.add("meme");
      meme.appendChild(top_text);
      meme.appendChild(bottom_text);
      meme.appendChild(img);
      meme.appendChild(btn);
      
      let memeLocation = document.getElementById('location');
      memeLocation.appendChild(meme);

      document.getElementById('picurl').value = "";
      document.getElementById('text_top').value = "";
      document.getElementById('text_lower').value = "";

      btn.addEventListener('click', function(e) {
          meme.remove();
      })
});

h1 {
  color: navy;
}

.center {
  text-align: center;
}

.main {
  width: 50%;
  margin: 0 auto;
  background-color: lightblue;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.meme {
  width: 99%;
  /* margin: 2 auto; */
  justify-content: center;
  border-radius: 0.5rem;
  border: 0.08rem solid black;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  position:relative;
}

.top_text{
position:absolute;
top:10px;
left:30px;
color:#ffffff;
z-index:3
}

.bottom_text{
position:absolute;
bottom:20px;
left:30px;
color:#ffffff;
z-index:3
}

.meme img{
max-width:100%;
z-index:2
}

main:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

meme:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

body {
  background-color: #f0feff;
}

.button {
  float: right;
}


/* divider styles */

hr.rounded {
  border-top: 2px solid #bbb;
  border-radius: 5px;
  width: 90%;
}

.border_lower {
  border-bottom: 1px solid #bbb;
  border-radius: 5px;
  width: 90%;
}


/* form styles */

form {
  width: 60%;
  margin: 0 auto;
}

form input {
  margin: 2px;
}

form label {
  margin: 2px;
}


/* Container holding the image and the text */

.container {
  position: relative;
  text-align: center;
  color: white;
}


/* Bottom left text */

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}


/* Top left text */

.location {
  position: absolute;
  top: 8px;
  left: 16px;
}

<main class="main">
  <h1 class="center">MEME GENERATOR!</h1>
  <hr class="rounded" />
  <form action="#" class="form">
    <label for="text_top">Text Upper:</label>
    <input type="text" name="text_top" id="text_top" /><br />
    <label for="text_lower">Text Lower:</label>
    <input type="text" name="text_lower" id="text_lower" /><br />
    <label for="picturl">Picture:</label>
    <input type="url" name="picurl" value="https://www.fillmurray.com/640/360" id="picurl" /><br /><br /><br />
    <input type="submit" value="Add Meme:" /><br />
    <hr />
  </form>
  <div id="location"></div>
  <hr class="border_lower" />
  <p class="center"><small>Thanks for visiting!</small></p>
</main>