How to find an image in the DOM with a certain alt using JS?

Question

JavaScript

Hello.

Tell me in more detail, please, how to check if an image with a specific alt is present in the document (for example, alt="picture") and, if so, add a class to a certain element and put this image as the background of this element?
For example:

<article class="article-picture" style="background-image:url('путь до изображение согласно src');">
    <h1>Заголовок</h1>

    <p>Какой-то текст</p>
    <img src="путь до изображения" alt="picture">
    <p>Какой-то текст</p>
</article>

That is, it turns out that if the document has an image with , then the class is added alt="picture"to the element , and the image itself is set as the background. In addition, the image from the text itself must be removed. To end up like this:articlearticle-picture

<article class="article-picture" style="background-image:url('путь до изображение согласно src');">
    <h1>Заголовок</h1>

    <p>Какой-то текст</p>
    <p>Какой-то текст</p>
</article>

All this must be done using JS (better jQuery).
I assume this is done in a few lines, but I'm not familiar with JS.

Answer 1

$('img[alt="picture"]')
https://api.jquery.com/category/selectors/attribute...