.txtファイルからhtmlにデータを挿入する方法

Question

テキストファイルからhtmlにデータを挿入したいと思います。どうやってやるの？私のコードに何か間違っていますか？私が知っているのは、テキストファイルのパスだけです。ありがとう。

document.getElementById("description").src = "/bestreads/books/alannathefirstadventure/description.txt"; 

Answer 1

JavaScriptとXMLHttpRequestオブジェクトを使用できます。このような

何か：

あなたのXHR関数を宣言します。

function sendXHR(type, url, data, callback) { 
    var newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP"); 
    newXHR.open(type, url, true); 
    newXHR.send(data); 
    newXHR.onreadystatechange = function() { 
    if (this.status === 200 && this.readyState === 4) { 
     callback(this.response); 
    } 
    }; 
} 

次にあなたが使用することができます。

sendXHR("GET", "/bestreads/books/alannathefirstadventure/description.txt", null, function(response) { // response contains the content of the description.txt file. 
    document.getElementById("description").innerHTML = response; // Use innerHTML to get or set the html content. 
}); 

してください、あなたはXMLHttpRequestオブジェクトの詳細情報を見つけることができます、here。

約innerHTML,here。

Answer 2

あなたはjQueryのを使用している場合は、あなたが行うことができ、最初のファイルを "読み" する必要があります。

$.get("bestreads/books/alannathefirstadventure/description.txt", function(data) { 
    document.getElementById("description").src=data; 
}); 

Answer 3

あなたの現在のコードがちょうどbestreads /冊を印刷します/ alannathefirstadventure/description.txt .TOあなたは、ファイルを読み込む変数にそのデータを取得し、コードの下のようなあなたのdivのsrcにその変数を割り当てる必要があります、あなたのhtmlのdivにテキストファイルからコンテンツを印刷：

$.get("bestreads/books/alannathefirstadventure/description.txt", function(data) { 
    document.getElementById("description").src=data; 
}); 

上記のコードでは、dataは、指定されたテキストファイルの内容全体を保持します。 プログラマがよくある間違いとしてテキストファイルの場所を確認してください。

Answer 4

あなたのCSSがテキストに適用されません、しかし

<div><object data="/bestreads/books/alannathefirstadventure/description.txt"></object></div> 

を行うことができるはずobject tag

でこれを行うための純粋なHTMLの道を言及する価値があるかもしれません。