[SOLVED] Insert a div

[The Little Guy]

I have a div that looks like this:

 

<div id="userComments" style="clear:both;">
     <div id="nextC"></div>
     <div id="nextC1" class="commentBlock">Comment</div>
      <div id="nextC2" class="commentBlock">Comment</div>
      <div id="nextC3" class="commentBlock">Comment</div>
</div>

 

I use ajax to insert a comment, it work, but I need help with something esle.

When I get the text back, it is what the user used for the comment. I want that text to go into "nextC", then rename that id to "next4" (since "nextC3" is the last one), and add a "commentBlock" class to it. After that I want to insert a new "nextC" div. It will be right where the current one is, and the new comment that was just added will be right below it.

 

All in all, I was just wondering, how do I insert a div after another div?

[JasonLewis]

Something like this?

 

<script language="javascript">
function addcomment(txt){
	var comments = document.getElementsByClassName("commentBlock"); //Get the current number of comments.
	alert(comments.length);
	document.getElementById("nextC").innerHTML = txt; //Add the current text.
	document.getElementById("nextC").className = "commentBlock";
	document.getElementById("nextC").id = "nextC"+(comments.length + 1);

	//Now add the new nextC div
	document.getElementById("userComments").innerHTML = "\n<div id=\"nextC\"></div>\n" + document.getElementById("userComments").innerHTML;
}
</script>

<div id="userComments" style="clear:both;">
   <div id="nextC"></div>
   <div id="nextC1" class="commentBlock">Comment</div>
   <div id="nextC2" class="commentBlock">Comment</div>
   <div id="nextC3" class="commentBlock">Comment</div>
</div>

<br />

<a href="javascript: addcomment('new comment');" />Add Comment</a>

[The Little Guy]

I found a better way, but I cant get it to work:

 

http://www.javascriptkit.com/javatutors/dom2.shtml

 

scroll down to where it says: "Click here for example" click on it. that is what I want. I can get it to work, but the HTML displays as text and doesn't render as HTML.

[The Little Guy]

I got it!

 

This code will insert into the beginning of the "userC" div:

var userC = document.getElementById('userComments');
try{
var myElement = document.createElement('<div id="nextC'+sCom+'" class="commentBlock">'+resp+'</div>');
} catch (e) {
var myElement = document.createElement("div");
myElement.setAttribute("id",'nextC'+sCom);
myElement.setAttribute("class",'commentBlock');
myElement.innerHTML = resp;
}
userC.insertBefore(myElement,userC.firstChild);