如何在 div 中将文本置于其他文本之上

Question

您好，我正在尝试在我的网站上创建一个评论部分，我编写的代码将我输入的评论放在已经输入的评论下方。

我真正想做的是将新输入的评论置于旧评论之上（例如 facebook 或 youtube 或任何其他网站 - 当您输入评论时，它会出现在旧评论之上（在第一个行)) 如何使用 javascript 执行此操作？谢谢你。下面是我写的代码。

<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

我想你希望你的最新文本应该放在其他文本之上 div,

JS

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

Answer 2

使用

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

Answer 3

i 将获取 div 的内容（所有旧评论）并将其分配给变量 x。然后获取输入值，并将其分配给变量 y。然后将 div 的内容设置为 y+x。

Answer 4

您正在 #comment 末尾追加新内容。如果我正确理解了这个问题，你想把它放在前面。将此行 document.getElementById("comment").innerHTML += "<pre>" + co.value + "\n" + "</pre>"; 更改为

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

Answer 5

仅使用 javascript 执行此操作，因为您的代码中没有 jQuery，尽管您已对其进行标记

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

如何在 div 中将文本置于其他文本之上

How to put text on top of the other text in div

html

javascript

css

jquery

appendtext