Erstellen mehrerer HTML-Elemente mit einem Objekt und jQuery

Question

Ich möchte also einen Block von Elementen erstellen, die Klassen und Attribute von einem Objekt nehmen.

verwende ich die Funktion, das Objekt

function profile(name, img, health, strength) { 
    return { 
     name: name, 
     img: img 
    } 
}; 

Dann ein div ich jQuery und das Objekt zum Erstellen zum Erstellen einer Klasse

function pushProfile(profile) { 
    $('<div />', { 
     "class": profile.name, 
     "class": 'profile', 
     text: 'test' 
    }).appendTo('.profile-class'); 
}; 

es bisher scheint funktioniert alles zu bieten. Meine Frage ist, kann ich verschachtelte Elemente zu dem neuen Div innerhalb der gleichen Funktion hinzufügen? Etwas wie das?

function pushProfile(profile) { 
    $('<div />', { 
     "class": profile.name, 
     "class": 'profile', 
     text: 'test' 
    }).appendTo('.profile-class'); 
    $('.' + profile.name).prepend('<img src=' + '"' + profile.img + '" />'); 
}; 

bin ich ziemlich sicher, was ich für das Hinzufügen der img schrieb falsch ist, aber ich kann keine Dokumentation zu finden scheinen auf jemand etwas zu tun, ähnlich wie dies so kann ich nur über dieses falsch gehen. Wenn jemand Vorschläge zu einer anderen Methode hat, bin ich absolut offen dafür.

Danke!

Answer 1

Set prepend als eine Eigenschaft von attributes bei jQuery(html, attributes)

function pushProfile(profile) { 
    $('<div />', { 
     "class": `${profile.name} profile`, 
     text: 'test', 
     prepend: `<img src="${profile.img}"/>` 
    }).appendTo('.profile-class'); 
}; 

Siehe auch How to pass options objects as parameters to method set at second parameter of jQuery()?

Answer 2

Stellen Sie alle Ihre Eigenschaften im Objekt Ihrer Ihre Elementkonstruktor Funktion

function pushProfile(profile) { 
    $('<div />', { 
     "class": profile.name + ' profile', 
     text: 'test', 
     prepend: '<img src="' + profile.img + '">', 
     appendTo: '.profile-class' 
    }); 
}