javascript - 我如何将从 javascript 添加的多个元素分离到我的 HTML 中？

Question

我正在尝试在 HTML/Javascript 中复制以下图像:

这是我得到的结果:

这是我在 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);

此代码片段执行以下操作: 读取包含日期的在线文本文件。 将每个日期分隔成数组中的一个元素。 通过一个 for 循环运行，使每个日期成为 div previousResultsList 中的一个链接

我写信是想问我如何才能分离添加到 div 中的元素:"previousResultsList"

第一个问题是:

1) 以列表形式简单地将元素一个接一个地分离出来。

2) 我如何将那个月的任何日期的日期分成 block ，并在旁边附上图像。

Answer 1

根据屏幕截图，我猜测它与 CSS 和 position: aboslute 有关。除非您发布一些 HTML 和 CSS，否则不能做更多。

我这里有一个工作示例 https://jsfiddle.net/tkcohpqv/20/

将此添加到您的函数中，只要 parentElement 宽度小于同一行上 2 个元素的宽度，它就会堆叠并分隔 a。

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