Generieren von HTML in JQuery mit Append()

Question

Gibt es eine Möglichkeit für JQuery, den HTML-Code in der Seitenquelle tatsächlich zu generieren? Ich versuche, Anchor-Tags für jede Zeile hinzuzufügen, aber sie verknüpfen nicht, da das Snippet den HTML-Code nicht generiert. Vielen Dank!

> Link to previous question

$.get('file.txt', function(data) { 
    var i = 0; 
    var lines = data.split("\n"); 
    $.each(lines, function(n, elem) { 
    var elements = elem.split(','); 

    $('#display').append('<div><img src="' + elements[0] + '"/></div>'); 

      }); 
     }); 

Answer 1

Ja, die jQuery Art und Weise ist die folgende:

$('<div/>', { 
    'html': $('<img/>', { 
    'src': 'http://placehold.it/100x100' 
    }), 
    'class': 'some-class-name', 
    'data-attr': 'custom data attribute' 
}).appendTo('#display'); 

Demo: https://jsfiddle.net/6jqds8gx/

Answer 2

Ja, es ist möglich.

Siehe jQuery() API

Siehe Creating DOM Elements

var newdiv = $("<div>"); //create a new div element and select it. 
newdiv.appendTo("body"); //append the new div to body. 

Answer 3

Ihre Fehler auf dem Weg befindet Sie spalten ...

Sie brauchen so etwas wie das zu tun, (.when(file) sollte mit .get('file.txt') ersetzt werden:

var file = "http://www.exemple.com/img1.jpg, title1, subtitle1, description1; http://www.exemple.com/img2.jpg, title2, subtitle2, description2; http://www.exemple.com/img3.jpg, title3, subtitle3, description3; http://www.exemple.com/img4.jpg, title4, subtitle4, description4; http://www.exemple.com/img5.jpg, title5, subtitle5, description5;"; 
 

 
function AppendImagesCtrl($) { 
 
    $ 
 
// .get('file.txt') 
 
    .when(file) // this is a fake 
 
    .then(file => file.split(/; ?\n? ?/)) 
 
    .then(lines => lines.map((line, i) => { 
 
    line = line.trim(); 
 
    if(!line) { return ""; } 
 
    
 
    let [ 
 
     img, title, subtitle, description 
 
    ] = line.split(/, ?n? ?/); 
 
    
 
    return `<article id="${(i + 1)}"> 
 
<h1>${title}</h1> 
 
<img src="${img}" alt="${img}" /> 
 
</article>`; 
 
    })) 
 
    .then(view => $('#example').append(view)) 
 
    ; 
 
} 
 

 
window.jQuery(document).ready(AppendImagesCtrl);

img { width: 100px; height: 50px; background: cyan; } 
 
article { padding: 5px 10px; background: lightseagreen; margin-bottom: 5px;}

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