2

私は、人がコメントできるコメントボックスがあるWebページで作業しています。これらのコメントは、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番目のコメントです」という、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()appendの代わりにを使用してみましたが、前の要素（つまり、最後に作成された要素）を取得する方法がわかりません<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);

Also, be careful while using "innerHTML" it doesn't update the DOM directly. So if the you need to refer to any element inside the postContent you won't be able to, because the DOM won't see it. A better approach would be to create every element that you might need to reference using the createElement() function of javascript.

Also you might want to give your IDs a unique identifier, probably something from the Database (not directly if sensitive information is involved).

于 2012-08-14T14:44:27.237 に答える