Wie man Text über den anderen Text in div setzt

Question

Hallo Ich versuche, einen Kommentarabschnitt auf meiner Website zu machen, und der Code, den ich geschrieben habe, platziert den Kommentar, den ich unterhalb des Kommentars eintippe, der bereits eingegeben wurde in.

was ich wirklich tun möchte ist, dass die neu eingegebenen Kommentar über die alten Kommentare (wie Facebook oder Youtube oder andere Websites - wenn Sie den Kommentar eingeben, es erscheint über den älteren Kommentaren (in der erste Zeile)) Wie mache ich das mit Javascript? Vielen Dank. Unten ist der Code, den ich geschrieben habe.

<input id = "txtboxComment" type = "text" onkeyup = "typeComment(event)" placeholder = "Write a comment"/> 
<div id = "comment"></div> 

#txtboxComment { 
    float: left; 
    width: 600px; 
    height: 25px; 
    margin-left: 10px; 
    margin-top: 10px;} 

#comment { 
    border: solid 1px; 
    float: left; 
    width: 602px; 
    height: auto; 
    margin-left: 51px; 
    margin-top: 10px; 
} 

function typeComment(e) { 
    co = document.getElementById("txtboxComment"); 
    if (e.keyCode == 13) { 
     co.click(); 
     document.getElementById("comment").innerHTML += "<pre>" + co.value + "\n" + "</pre>"; 
} 

Answer 1

tun es nur mit Hilfe von Javascript, da es keine jQuery in Ihrem Code ist, obwohl Sie es

function typeComment(e){ // Execute this function on enter key 
    co = document.getElementById("txtboxComment"); 
    var _comment = document.createElement('pre'); //create a pre tag 
    if (e.keyCode == 13) { 
     co.click(); 
     _comment.textContent = co.value; //put the value inside pre tag 
     var _commentDiv = document.getElementById("comment"); 
     if(_commentDiv.firstChild === null){ // Will validate if any comment is there 
     // If no comment is present just append the child 
     document.getElementById("comment").appendChild(_comment) 
     } 
     else{ 
     // If a comment is present insert the new 
     // comment before the present first child in comment section 
     document.getElementById("comment").insertBefore(_comment,_commentDiv.firstChild); 
     } 
    } 
} 

Working Example

Answer 2

Ich glaube, Sie wollen, dass Ihre letzte Text auf der Oberseite des anderen div platziert werden soll,

JS

$("#pcontainer").prepend($('<p>This paragraph was added by jQuery.</p>').fadeIn('slow')); 

Answer 3

Verwenden

document.getElementById("comment").innerHTML = "<pre>" + co.value + "\n" + "</pre>" + document.getElementById("comment").innerHTML; 

Answer 4

Ich würde den Inhalt der div (alle alten Kommentare) bekommen und dies der Variablen x zuordnen. Dann hole den Input-Wert und weise ihn variabel zu. Setze dann den Inhalt des Divs auf y + x.

Answer 5

Sie fügen den neuen Inhalt am Ende von #comment an. Wenn ich die Frage richtig verstehe, möchte ich sie vorwegnehmen. Ändern Sie diese Zeile document.getElementById("comment").innerHTML += "<pre>" + co.value + "\n" + "</pre>"; zu

document.getElementById("comment").innerHTML = "<pre>" + co.value + "\n" + "</pre>" + document.getElementById("comment").innerHTML;