Copier l'image à l'aide de JavaScript

Question

Récemment, j'ai décidé d'essayer de mettre en pratique de petits projets différents de ceux réalisés en classe. Celui-ci a un objectif simple : j’ai une image et un bouton à côté. Chaque fois que vous appuyez sur un bouton, il doit créer une balise img avec la même classe et le même contenu que la première, avant le bouton lui-même. //FromHTMLconstcontent=document.querySelector('#content');constaddBtn=document.querySelector('#btn-

P粉654894952 · Answer

J'ai apporté quelques modifications à votre fonction addImagem : Utilisez la fonction "setAttribute" pour qu'elle ne crée pas de nouvelle balise img à l'intérieur d'une balise déjà existante.

function addImagem(){

    const img = document.createElement('img'); // create img
    img.classList.add('imgQ'); // give this img a class ('imgQ')
    img.setAttribute('src',"imgs/bigodes.jpg"); // give this img a HTML content

    content.insertBefore(img,content.children[0]); // insert this img before add button inside div

}

La fonction "forEach" ne fonctionne qu'avec des tableaux. Puisque vous n'avez qu'un seul bouton, vous pouvez utiliser :

addBtn.addEventListener('click',addImagem)

Ou vous pouvez remplacer le querySelector de addBtn par querySelectorAll.

P粉610028841 · Answer

// From HTML

const content = document.querySelector('#content');
const addBtn = document.querySelectorAll('#btn-plus');

// Function

function addImagem(){

    const img = document.createElement('img'); // create img
    img.classList.add('imgQ'); // give this img a class ('imgQ')
  content.insertBefore(img,document.querySelector('#btn-plus'));
  // insert this img before add button inside div
    img.outerHTML = ''; // give this img a HTML content
}


//Event

for(var i = 0; i 


    
    
    Gats       
    
    
    
        sssccc


    
        Cats! Anyway

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket