Question

我正在尝试使用html和javascript代码逐行打印出文本文件。我的代码是：

<!DOCTYPE html>
<html>
<head>
<script>
    function loadXMLDoc()
    {
        var xhr, i, text, lines;

        if(window.XMLHttpRequest)
        {
            // IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
        }
        else
        {
            // IE5, IE6  - next line supports these dinosaurs
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xhr.onreadystatechange = function()
        {
            if(xhr.readyState == 4 && xhr.status == 200)
            {
                text = xhr.responseText;
                lines = text.split("\n"); 

                for(i = 1; i < lines.length; i++)
                { 
                    document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "\n" + lines[i];
                }
            }
        }

        xhr.open("GET","File.txt",true);
        xhr.send();
    }
</script>
</head>
<body>

<div id="myDiv"><h2></h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

我想到这一行：

document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "\n" + lines[i];

将采取当前的新内容，发布一个新行，并从文本文件中发布新行。问题是当我在浏览器中运行它时（或者我认为不是）发布新行，只是用空格水平发布它。

有什么想法吗？感谢

Answer 1

您可以使用此

中的1个

xhr.onreadystatechange = function()
{
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        text = xhr.responseText;
        lines = text.split("\n"); 

        for(i = 1; i < lines.length; i++)
        { 
            document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "<br>" + lines[i];
        }
    }
}

或

xhr.onreadystatechange = function()
{
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + xhr.responseText.replace(/[\r\n]/g, "<br>");

    }
}

Answer 2

HTML中的新行表示换行符（<br>）。将你的\ n更改为，你应该没事。

Answer 3

最多HTML 4 br

HTML 5
或br /是好的

在XHTML br /

中

更新for循环中的<div> </div>

3 个答案: