我想制作一个 html 来自动获取 *.txt 文件的信息
something1
something2
something3
并输出到这个html文件中
<!DOCTYPE html>
<html>
<head>
<title>List</title>
</head>
<body>
<ul>
#here to output#
</ul>
</body>
</html>
我更喜欢使用 JavaScript。一些帮助表示赞赏。
最佳答案
您必须使用 AJAX 调用来请求文件。然后您需要遍历每一行响应并生成 DOM 元素(在本例中为 li)和其中的输入行。之后将每个 li 元素插入到您的 ul 列表中。
您可以使用 jQuery 实现它，因为您可能是 JavaScript 的新手，这可能是最简单的方法。
您需要做的是先请求文件:
$.ajax('url/to/your/file', {
success: fileRetrieved
});
现在在检索文件后 jQuery 将调用 fileRetrieved 方法，因此我们必须创建它:
function fileRetrieved(contents) {
var lines = contents.split('\n');
for(var i = 0; i < lines.length; i += 1) {
createListElement(lines[i]);
}
}
现在，对于文件中的每一行，fileRetrieved 函数将调用 createListElement 函数，将文本行传递给它。现在我们只需要生成列表元素并将其注入(inject) DOM。
function createListElement(text) {
var into = $('ul');
var el = $('<li></li>').html(text);
el.appendTo(into);
}
当然，您不想每次调用 createListElement 时都检索 into 元素，所以只需将它存储在函数之外的某个地方，这是您的决定，我只是给你大概的想法。
这是一个脚本示例(当然没有 AJAX 调用，因为我们无法模拟它):
var into = $('#result');
function fileRetrieved(contents) {
var lines = contents.split('\n');
for (var i = 0; i < lines.length; i += 1) {
createListElement(lines[i]);
}
}
function createListElement(text) {
var el = $('<li></li>').html(text);
el.appendTo(into);
}
var text = $('#text').html();
fileRetrieved(text);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This element simulates file contents-->
<pre id="text">
fdsafdsafdsa
fdsafd
safdsaf
dsafdsaf
dsafdsafds
afdsa
</pre>
<div id="result"></div>关于javascript - 文本到 Html 列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40817894/