javascript - 格式化显示在 div 中的搜索结果

Question

我想得到一些关于格式化div标签的建议。

目前div，我的代码中的标签将显示在函数中执行的结果：

document.getElementById("searchresults").innerHTML = searchHTML;

并且搜索结果将显示在 div 中。

<div id="searchresults"></div>

目前，将显示的输出将水平堆叠。

它看起来有点混乱，因为很难区分每个输出。

我想知道有没有办法格式化每个输出。例如，每个输出都将在自己的容器中？

并且每个容器可以更加个性化吗？

Answer 1

对于每个结果，请执行以下操作：

// Create div
var resultDiv = document.createElement('div');
resultDiv.innerHTML = result;
resultDiv.className = "resultContainer"; // Add appropriate CSS

// Append result to container
document.getElementById('searchresults').appendChild(resultDiv);

Answer 2

你能通过javacript动态生成div吗？使用 for 循环执行类似.. 对于每个搜索结果，使用搜索结果 X 生成 div X

Answer 3

通常，您可以将输出包装在标签中，例如 a<div>以使输出垂直流动。然后，您可以使用 CSS 设置searchresults面板中的内容样式：

document.getElementById("searchresults").innerHTML = "<div class='line'>" + searchHTML + "</div>";

#searchresults .line {
    /* ... */
}

Answer 4

确保“#searchresults”具有宽度和高度以及位置：相对

并添加一个css类，宽度和高度以及float：left到searchHTML内每个searchresult的包装容器

瞧