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 thatinsertBefore
to 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 useappendChild
but insert it always in the first position. Instead, you can use the propertyfirstChild
with 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屋!
查看全文