テキストを底部ではなく上部に出力する

Question

テキストをコンテナに送信する関数を書いた。テキストはテキストの各ブロックの最後に追加されます。前のテキストブロックの一番上に、下になるのではなく、上に追加したいと思います。

function submit() { 


var x = document.getElementById("text").value; 
var y = document.getElementById("input").value; 
var z = document.getDate; 
if(x.length == 0 || y.length == 0){ 

    alert('please enter valid information'); 
    return false; 
} 


document.getElementById("output").innerHTML += Date() + "</br>" + " </br>"; 
document.getElementById("output").innerHTML += y + "</br>" + "</br>"; 
document.getElementById("output").innerHTML += x + "</br>" + "</br>"; 
document.getElementById("text").value = ""; 
document.getElementById("input").value = ""; 

return true;      
} 

Answer 1

はちょうどこのように、追加されたコンテンツの後のinnerHTMLをreasign：ここ

が私のコードである

function submit() { 


var x = document.getElementById("text").value; 
var y = document.getElementById("input").value; 
var z = document.getDate; 

if(x.length == 0 || y.length == 0){ 

    alert('please enter valid information'); 
    return false; 
} 


document.getElementById("output").innerHTML = Date() + "</br></br>" + y +  
    "</br></br>"+ x +"</br></br>" +document.getElementById("output").innerHTML; 

document.getElementById("text").value = ""; 
document.getElementById("input").value = ""; 



return true;      
} 

ザッツあなたはjQueryのを使用していないと仮定すると、otherwhiseはちょうど使用.prepend()

Answer 2

variable += "text"ステートメントはvariable = variable + "text"の省略形です。したがって、既に入力したテキストの後にテキストを連結します変数。この場合、変数はコンテナのinnerHTMLプロパティです。したがって、テキストはコンテナ内のテキストの最後に連結されています。

ただし、の前に新しいテキストを連結して、の前にテキストを挿入します。したがって、コンテナから既存のテキストを読み取ってから、新しいテキストの末尾に連結しなければなりません（variable = "text" + variableなど）。

document.getElementById("output").innerHTML = Date() + "</br>" + " </br>" + document.getElementById("output").innerHTML; 
document.getElementById("output").innerHTML = y + "</br>" + "</br>" + document.getElementById("output").innerHTML; 
document.getElementById("output").innerHTML = x + "</br>" + "</br>" + document.getElementById("output").innerHTML; 

をしかし、あなたはそれが容器の内容物が逆順になるようになりますように、その、あなたはどちらかやりたいしないことがわかります：

あなたはこのような何かを行うことができ思うかもしれません。これはもちろん、各ステップのinnerHTMLには前のステップの結果が含まれているために発生します。これには2つのオプションがあります：すべてのテキストを1つの塊に追加するか、別々の文字列に追加してから、その内容をコンテナの内容の前に付加します。後者の例：もちろん

var new_data = Date() + "</br>" + " </br>"; 
new_data = new_data + y + "</br>" + "</br>"; 
new_data = new_data + x + "</br>" + "</br>"; 
document.getElementById("output").innerHTML = new_data + document.getElementById("output").innerHTML; 

は、上記のコードの2行目と3行目は、new_dataの終わりに値y + "</br>" + "</br>"とx + "</br>" + "</br>"を付加しているので、コードは

var new_data = Date() + "</br>" + " </br>"; 
new_data += y + "</br>" + "</br>"; 
new_data += x + "</br>" + "</br>"; 
document.getElementById("output").innerHTML = new_data + document.getElementById("output").innerHTML; 

のように書くことができます

追加するには+=を使用することに注意してください。