2

我正在开发一个带有评论框的网页,人们可以使用该评论框进行评论,这些评论使用 AJAX 动态显示在同一页面上。例如,当您提交评论时,它会发布在之前的评论之上。

这是我在 AJAX 中所做的事情:

xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            var newDivElement = document.createElement('form');
            newDivElement.setAttribute('id',"postForm");
            newDivElement.setAttribute('action',"updateRecords.php");
            newDivElement.setAttribute('method',"post");
            newDivElement.innerHTML=postContent; 

            document.getElementById('mainPostContainer').appendChild(newDivElement);
        }
    }

postcontent由一个包含评论的 div 组成)

现在,如果我连续发表两条评论,说“这是第 1 条评论”和“这是第 2 条评论”,它们会按以下顺序发布:

<div id=mainPostContainer>
    <form id="postForm" action="updateRecords.php" method="post"><div id="post"> this is 1st comment </div></form>
    <form id="postForm" action="updateRecords.php" method="post"><div id="post"> this is 2nd comment </div></form>
</div>

但我希望它们按以下顺序排列:

<div id=mainPostContainer>
    <form id="postForm" action="updateRecords.php" method="post"><div id="post"> this is 2nd comment </div></form>
    <form id="postForm" action="updateRecords.php" method="post"><div id="post"> this is 1st comment </div></form>
</div>

我尝试使用insertBefore()而不是追加,但我不知道如何获取前一个元素(即最后创建的<form>)。

我在这里做错了吗?还是有更好的方法来做我想做的事情?也许使用jQuery?

编辑:我正在使用<form>,因为表单中有按钮和文本类型的输入元素,我没有提到它们只是为了保持简单。

4

2 回答 2

4

添加新元素作为第一个子元素

普通的旧 JavaScript

HTML:

<div id="mainPostContainer"><p>1</p></div>

JavaScript:

var myContainer = document.getElementById("mainPostContainer");
var p = document.createElement("p");
p.innerHTML = "2";
myContainer.insertBefore(p,myContainer.firstChild);

例子:

jsfiddle


jQuery

HTML:

<div id="mainPostContainer"><p>1</p></div>

JavaScript:

var p = $("<p>2</p>");
$("#mainPostContainer").prepend(p);

例子:

jsfiddle

于 2012-08-14T14:43:58.053 回答
2

您可以使用 Jquery 方法“prepend()”。http://api.jquery.com/prepend/ 尝试做这样的事情:

$('#mainPostContainer').prepend(newDivElement);

此外,在使用“innerHTML”时要小心,它不会直接更新 DOM。因此,如果您需要引用 postContent 中的任何元素,您将无法这样做,因为 DOM 不会看到它。更好的方法是使用 javascript 的 createElement() 函数创建您可能需要引用的每个元素。

此外,您可能希望为您的 ID 提供一个唯一标识符,可能来自数据库(如果涉及敏感信息,则不是直接)。

于 2012-08-14T14:44:27.237 回答