title: How can I place a white image at the top and bottom (eg: 40px) of every image in an html file in js?
body: <p>I am trying to add an image/blank rectangle on top of/overlaid on the top and bottom of every image on an html page. I plan to do this via a user-script, but I could not find any information on how to append an image on another at a specified PX x PX. I am slightly familiar with js. I have done two small hobby projects (an image parser and a poker game) this being the third, and assume I will have to achieve following:</p>
  <ol>
  <li><p>Create a blank image to cover the top and bottom part of the image.</p>
  <p>This can be done by creating a simple rectangle I think. I can play with the parameters of the size to make it fit.</p>
  </li>
  <li><p>get every image on the site</p>
  <p>I can probably do this by parsing the <code>DOM</code> (I'm not sure if I need to do this if I am using a user-script) and doing a <code>forEach(img)</code>, and within the <code>forEach(img =&gt;</code> I can add the rectangle to the top and bottom thereby adding it to every image on the page.</p>
  </li>
  <li><p>somehow append the blank image from above on top of the top and bottom of each image.</p>
  <p>This is where I am lost. I have appended images to the DOM before, but I don't know how to do it through a user-script and I also don't know have to append an image on another image. I have thought of doing the following, but I am unsure how to continue:</p>
  </li>
  </ol>
  <p>I also have linked an example where I would use this user-script. What I am trying to do is remove a watermark. (I am only doing this locally on my computer as to not steal the translators work, which is why I am using JavaScript.) So to recap I am looking for how to solve number 3, and if possible/optionally an explanation of how to do this in grease-monkey or any other user-script manager. Let me know if anything was unclear and thanks to anybody who comments/answers this problem. edit:clarity</p>
  <p><a href="https://i.stack.imgur.com/LHgRz.jpg" rel="nofollow noreferrer">here is a link to an example use case</a></p>