How to move all comment replies under the ones replied to on my Blogspot blog?

Here is the location of the comments I need help with on my scrap Blogger/blogspot blog.

I'm trying to move the replies under the ones they reply to.

1. I want to move the reply starting from the <li> node it is in, then

2. place it in a created <ul class="children"> tag inside of the <li> node of which the comment replies to

3. I also want to remove the reply from the moved comment(s)

The comments look like this:

<li class="comments">...</li>
<li class="comments">...</li>
<li class="comments">...</li>

When the comment is moved, it should look like:

<li class="comment">

<div class="comment-body>...</div>

<ul class="children"> /* Inser开发者_Go百科ted via javascript */

  <li class="comment">...</li> /* This is the moved comment */

</ul>

</li>

<li class="comment">...</li>

If you are using Firebug, you can see the threaded look I'm looking for by moving an <li class="comment"> inside of another.

Help me please

Instead of doing that, you could use the ::first-child pseudo selector to move the first comment or parent comment to the left. You can do this by applying a margin to all the comments except for the first-child one.

Update:

How to use JQuery for this.

1. Get the contents of a comment and store them in a variable.
2. Destroy the HTML tag that stores the comment.
3. Use append to put the contents at the end of a div.