Fügen Sie untergeordnete Elemente vor dem inneren Text ein

Question

Ich habe den folgenden jQuery/JavaScript-Code. Es fügt mehrere Elemente zu einem bestehenden <div> hinzu. Es funktioniert gut, außer dass ich möchte, dass der Text nach das erste Bild eingefügt wird.

Bietet jQuery-Anbieter eine einfache Syntax zum Hinzufügen des untergeordneten Elements Element vor der innere Text? Ich weiß, dass ich die Elemente separat erstellen kann, aber ich möchte die Ausdrücke so einfach wie möglich halten.

var div = document.getElementById("div"); 
 

 
var attachmentDiv = $('<div />', { 'class': 'Attachment' }); 
 
attachmentDiv.append($('<a />', { href: '#', title: 'Download Attachment', text: 'Filename.ext' }) 
 
    .append($('<img />', { src: 'https://cdn0.iconfinder.com/data/icons/typicons-2/24/spanner-128.png', 'class': 'AttachmentIcon', alt: 'File Attachment' }))); 
 
attachmentDiv.append($('<a />', { href: '#', title: 'Delete Attachment', 'data-id': '000' }) 
 
    .append($('<img />', { src: 'https://cdn0.iconfinder.com/data/icons/typicons-2/24/spanner-128.png', 'class': 'AttachmentDeleteIcon', alt: 'Delete Attachment' }))); 
 
$(div).append(attachmentDiv);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div"></div>

Answer 1

var div = document.getElementById("div"); 
 

 
var attachmentDiv = $('<div />', { 'class': 'Attachment' }); 
 
attachmentDiv.append($('<a />', { href: '#', title: 'Download Attachment', text: 'Filename.ext' }) 
 
    .prepend($('<img />', { src: 'https://cdn0.iconfinder.com/data/icons/typicons-2/24/spanner-128.png', 'class': 'AttachmentIcon', alt: 'File Attachment' }))); 
 
attachmentDiv.append($('<a />', { href: '#', title: 'Delete Attachment', 'data-id': '000' }) 
 
    .append($('<img />', { src: 'https://cdn0.iconfinder.com/data/icons/typicons-2/24/spanner-128.png', 'class': 'AttachmentDeleteIcon', alt: 'Delete Attachment' }))); 
 
$(div).append(attachmentDiv);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div"></div>

Answer 2

Ilses jQuery prepend(). Es funktioniert genauso wie append(), aber fügt das Argument direkt nach dem öffnenden Tag des Ziels ein.