Javascript帮助订购在DOM中创建的元素！ [英] Javascript help in ordering elements created in DOM!
本文介绍了Javascript帮助订购在DOM中创建的元素！的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我正在创建一个js文件，用于接收输入并在网页上发布内容。
这是源代码：
Hey everyone,
I am creating a js file for taking input and posting the contents in the webpage.
Here is the source code:
<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>
这是一个小问题，当输入和创建元素时。但问题是元素按照旧到新的顺序出现（即首次发布到最近）！
但我希望它们出现按最近的顺序。任何人都可以帮助我..？
谢谢，
digi0ps
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
推荐答案
Sergey Alexandrovich Kryukov为您提供了一个使用insertBefore的解决方案，这将解决您的目的。
我创建了一个Demo for你使用那个insertBefore来完成你的任务。
看看 - [Demo] Javascript帮助订购在DOM中创建的元素！ [ ^ ]。
Sergey Alexandrovich Kryukov has provided you one solution to useinsertBefore, which will solve your purpose.
I have created one Demo for you using thatinsertBeforeto do your task.
Take a look - [Demo] Javascript help in ordering elements created in DOM![^].
请查看我对该问题的评论。
首先，考虑最简单的替代方案：如果您总是需要相同的订单，从最近到最后，只是不要使用appendChild，但始终将其插入第一个位置。相反，您可以使用属性firstChild，方法insertBefore：
http://www.w3schools.com/dom/prop_element_firstchild.asp [ ^ ]，
http://www.w3schools.com/dom/met_element_insertbefore.asp [ ^ ]。
在每一步中，找到第一个孩子，然后添加一个新元素它。
通常，使用jQuery可以轻松完成： http://api.jquery.com/prepend/ [ ^ ]。
如果你需要动态地采取措施，f首先考虑我对这个问题的第一个评论。同时，您可以获得很多关于排序的想法： http：// www。 tripwiremagazine.com/2012/05/jquery-filter-sort-plugins.html [ ^ ]。
如果您需要学习jQuery（强烈推荐），请参阅：
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 / [ ^ ]（从这里开始）。
-SA
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 useappendChildbut insert it always in the first position. Instead, you can use the propertyfirstChildwith the methodinsertBefore:
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
这篇关于Javascript帮助订购在DOM中创建的元素！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
