Wie würde ich mehrere Elemente, die von Javascript hinzugefügt wurden, in mein HTML-Dokument aufteilen?

Question

Ich versuche, das folgende Bild in HTML/Javascript zu reproduzieren:

Dies ist, wie weit ich habe:

Dies ist mein Code in Javascript:

function createLink(text, parentElement) { 
    var a = document.createElement('a'); 
    var linkText = document.createTextNode(text); 
    a.appendChild(linkText); 
    temp1 = text.replace("/","-"); 
    temp2 = res1.replace("/","-"); 
    a.href = "http://www.drakedesign.co.uk/mdmarketing/uploads/" + temp2 + ".csv"; 
    parentElement.appendChild(a); 
} 

var txtFile8 = new XMLHttpRequest(); 
txtFile8.open("GET", "http://www.drakedesign.co.uk/mdmarketing/uploads/date.txt", true); 
txtFile8.onreadystatechange = function() { 
    if (txtFile8.readyState === 4) { // Makes sure the document is ready to parse. 
     if((txtFile8.status == 200) || (txtFile8.status == 0)) { // Makes sure it's found the file. 
      allText8 = txtFile8.responseText; 
      arrayOfLines8 = allText8.match(/[^\r\n]+/g); 
      for (i = 0; i < arrayOfLines8.length - 1; i++) { 
       createLink(arrayOfLines8[i], document.getElementById("previousResultsList")); 
      }   
     } 
    } 
}; 

txtFile8.send(null); 

Dieses Code-Snippet funktioniert folgendermaßen: liest eine Online-Textdatei mit Datumsangaben. trennt jedes Datum in ein Element in einem Array. läuft durch eine for-Schleife jedes Datum in einen Link zu machen in den div previousResultsList

frage ich schreibe, wie ich möglicherweise die Elemente der div hinzugefügt trennen könnte: „previousResultsList“

Das erste Problem ist:

1) Die Elemente einfach nacheinander in Listenform trennen.

2) Wie würde ich die Daten in Stücke für irgendwelche Daten in diesem Monat trennen und das Bild an der Seite anbringen.

Answer 1

Ich vermute, es hat etwas mit CSS und position: aboslute basierend auf dem Screenshot zu tun. Kann nicht viel mehr tun, wenn Sie etwas HTML und CSS posten.

Ich habe ein funktionierendes Beispiel hier https://jsfiddle.net/tkcohpqv/20/

Fügen Sie diese in Ihrer Funktion und es wird stapeln und die a so lange trennen, wie die parentElement Breite kleiner als die Breite von 2 Elemente auf der gleichen Linie.

var a = document.createElement('a'); 
$(a).css('position', ''); 
$(a).css('display', 'block'); 
$(a).css('float', 'left'); 

Answer 2

löste ich dieses Problem, indem die Position in der CSS zum relativen Bearbeitung und meinen Code bearbeiten durch Zusatz:

 var br = document.createElement('br'); 
     parentElement.appendChild(br); 

bis zum Ende meiner Create() Funktion.