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 回答