Bild mit JavaScript kopieren

Question

Kürzlich habe ich beschlossen, zu versuchen, kleine Projekte in die Praxis umzusetzen, die sich von denen im Unterricht unterscheiden. Dieses hat ein einfaches Ziel: Ich habe ein Bild und einen Button daneben. Jedes Mal, wenn eine Schaltfläche gedrückt wird, sollte vor der Schaltfläche selbst ein IMG-Tag mit derselben Klasse und demselben Inhalt wie beim ersten erstellt werden. //FromHTMLconstcontent=document.querySelector('#content');constaddBtn=document.querySelector('#btn-

P粉654894952 · Answer

我对你的 addImagem 函数做了一些更改：使用“setAttribute”函数，这样它就不会在已经存在的内创建一个新的 img 标签。

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

}

“forEach”函数仅适用于数组。由于您只有一个按钮，您可以使用：

addBtn.addEventListener('click',addImagem)

或者您可以将 addBtn 的 querySelector 更改为 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       
    
    
    
        


    
        Cats! Anyway

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial