Javascript help in ordering elements created in DOM!

Question

0.00/5 (No votes)

See more:

Hey everyone,

I am creating a js file for taking input and posting the contents in the webpage.
Here is the source code:

HTML

<html>
<body>
<input type="text" id="typs" />
<input type="submit" value ="post " onclick="postf();">
<div id="container">
Posts
</div>
<script> 
function postf() {
var postEle = document.createElement("p");
var postCon = document.getElementById("typs").value;
var postTxt = document.createTextNode(postCon);
var con = document.getElementById("container");
postEle.appendChild(postTxt);
con.appendChild(postEle);
}
</script>
</body>
</html>

Here is one little problem, when the input is taken and the elements created. But the problem is the elements are coming in the order Old to New ( i.e First Posted to Recent ) !
But I want them to appear in the order Recent to last . Can anyone help me in that..?

Thanks,
digi0ps

Posted 30-May-13 5:30am

digi0ps

Add a Solution

Comments

Sergey Alexandrovich Kryukov 30-May-13 11:45am

To start with, you need some order defined for the elements, based on their "ages". What is it? It could be as simple as some DateTime string in "sortable" format ('s' or 'u'), or something else (order number, for example) which could help to build a sorting criterion. It does not have to be rendered visually (but why not? if the elements represent posts, it would be useful to see the time of post), could be hidden in some attribute...
—SA

Sergey Alexandrovich Kryukov 30-May-13 11:48am

Another question: if you need recent to last order, do you need to ever change the order? If not, just insert elements in required order in first place...
—SA

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2013-05-30T06:58:00

Solution 2

Sergey Alexandrovich Kryukov has provided you one solution to use insertBefore, which will solve your purpose.

I have created one Demo for you using that insertBefore to do your task.

Take a look - [Demo] Javascript help in ordering elements created in DOM![^].

Posted 30-May-13 6:58am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

Sergey Alexandrovich Kryukov 30-May-13 13:06pm

It's convenient to have such a sample in JS Fiddle, my 5.
Note that JS Fiddle also allows you to include jQuery, which could make the demo of the solution even simpler.
I should start using this nice on-line tool, as it can well ease-up generation of simple solutions, even though I have Visual Studio and the step-by-step script debugging...
—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-13 13:14pm

Thanks a lot Sergey Alexandrovich Kryukov...

Yes, I always prefer to give a live demo while I answer to any question in Code Project.

I just love this tool. I also use it with jQuery and external jQuery as well.

You can check all the fiddles I have created - http://jsfiddle.net/user/taditdash/fiddles/.

Sergey Alexandrovich Kryukov 30-May-13 13:25pm

Good to know, thanks for the note...
—SA

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-May-13 13:34pm

Welcome.

digi0ps 31-May-13 2:07am

Tadit, Thank you so much for that fiddle. That really helped! :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 31-May-13 4:02am

Most Welcome buddy... :)

Sergey Alexandrovich Kryukov · Accepted Answer · 2013-05-30T05:59:00

Please see my comments to the question.

First of all, consider the simplest alternative: if you always need the same order, recent to last, just don't use appendChild but insert it always in the first position. Instead, you can use the property firstChild with the method insertBefore:
http://www.w3schools.com/dom/prop_element_firstchild.asp[^],
http://www.w3schools.com/dom/met_element_insertbefore.asp[^].

On each step, find a first child and then add a new element before it.

As usually, it's done much easier with jQuery: http://api.jquery.com/prepend/[^].

If you need to resort something dynamically, first consider my first comment to the question. In the meanwhile, you can get a lot of ideas on sorting: http://www.tripwiremagazine.com/2012/05/jquery-filter-sort-plugins.html[^].

If you need to learn jQuery (highly recommended), please see:
http://en.wikipedia.org/wiki/JQuery[^],
http://jquery.com/[^],
http://learn.jquery.com/[^],
http://learn.jquery.com/using-jquery-core/[^],
http://learn.jquery.com/about-jquery/how-jquery-works/[^] (start from here).

—SA