Ajouter / supprimer des images dynamiquement

Bonjour,
je suis nouvelle sur ce forum et je sollicite votre aide car je suis débutante en Javascript. J'ai un exercice qui consiste à reproduire cette page en utilisant les méthodes Javascript et HTML. Cependant le code Javascript doit être dans un fichier séparer du code HTML. Alors j'ai déjà fais la base de l'URL image et le bouton Ajouter image, mais je bloque complétement pour comment insérer les images grâce à l'URL et faire en sorte que les boutons haut/bas et supprimer s'affichent et s'activent/désactivent selon la position de leur image associé. Et les images sont forcées à être affichées avec une dimension de 100 pixels en hauteur.

Merci d'avance pour votre aide Pièce jointe 603587

l'idée globale c'est que le bouton "ajouter image" va créer une nouvelle balise "img" avec l'url fourni.
montrez nous le code que vous avez essayé.

J'ai commencé par faire quelque chose comme ça :

Code:

---

1 2 3 4 5 6

let bouton_ajout = document.querySelector("button"); let ajout_image = function(ajout_image) { let img = document.createElement("img"); document.body.appendChild(img); } bouton_ajout.addEventListener('click',ajout_image);

---

Bonjour,

C'est un bon début !

Ce code devrait ajouter une balise <img />.

A présent, il va falloir faire en sorte d'y afficher quelque chose; on va donc définir des attributs.

La première chose à faire est d'y ajouter l'attribut src avec la valeur de la nouvelle image
Et perso, j'ajouterais une classe dessus également histoire de pouvoir forcer la hauteur de 100px en CSS et non en style inline (à moins que le but de l'exercice soit du style inline évidemment ^^)

Alors j'ai réussi à ajouter les images à la page mais maintenant il me faut la gestion des boutons haut bas et supprimer. Quelqu'un pourrait me donner un coup de main pour le déplacement des images? merci d'avance.