javascript - 在从 URL 表单提交的图像周围动态添加一个 div

Question

首先，这里对 javascript 和编码非常陌生，对此深表歉意。我正在从表单提交的 URL 中附加一张新图像。当图像加载到 DOM 中时，我需要向图像动态添加一个 div，这样我最终可以在图像的顶部和底部添加一些文本。这是一个模因生成器风格的应用程序。不确定最后的删除逻辑是否相关，但我会包括它以防万一。提前致谢!

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

let newMeme = new Image(470, 300);
newMeme.src = imageURL.value;
newMeme.setAttribute('class', 'memeStyle');
memeDiv.appendChild(newMeme);
imageURL.value = '';

newMeme.addEventListener('click', function(e) {
    newMeme.remove(e.target);
    console.log(e.target);
});

});

Answer 1

大致是这样的:

form.addEventListener('submit', function(e) {
  e.preventDefault();
  
  // Create the image
  const newMeme = new Image(200, 130);
  newMeme.src = imageURL.value;
  newMeme.setAttribute('class', 'memeStyle');
  
  // Create a top caption
  const topCaption = document.createElement('p');
  topCaption.appendChild(document.createTextNode('TOP CAPTION'));
  // Create a botom caption
  const bottomCaption = document.createElement('p');
  bottomCaption.appendChild(document.createTextNode('BOTTOM CAPTION'));
  
  // Add stuff to the wrapper
  memeDiv.appendChild(topCaption);
  memeDiv.appendChild(newMeme);
  memeDiv.appendChild(bottomCaption);
  
  imageURL.value = '';

  newMeme.addEventListener('click', function(e) {
    memeDiv.innerHTML = '';
  });
});

#memeDiv {
  float: left;
  position: relative;
}
#memeDiv p {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 4px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
}
#memeDiv p:first-of-type { top: 0; }
#memeDiv p:last-of-type { bottom: 0; }

<form id="form">
  <input id="imageURL" value="https://res.cloudinary.com/sagacity/image/upload/c_crop,h_1001,w_1500,x_0,y_0/c_limit,dpr_auto,f_auto,fl_lossy,q_80,w_1080/Kitten_murder_Jeff_Merkley_2_copy_hdpoxd.jpg">
  <input type="submit" value="Submit"> ← Hit submit
</form>

<div id="memeDiv"></div>