jQuery Prepend before an element

Question

I have a html structure like this/

<li id="1"></li>
<li id="2"></li>
<li id="3"></li>
<li id="comment-box"></li>

now i wanna prepend

<li id="4"></li>

before comment-box.

i am submitting a form from the comment box and once its a success i wanna do the prepend.

Outofdate

Answer 1

Use before():

$('#comment-box').before('<li id="4"></li>')

Catina

@Alastair i tried to use prepend. but i was getting this <li id="comment-box"><li id="4"></li> </li> so i posted the question here – Outofdate

wizztjh: before() works. i am trying to make is slideDown. which is not happening. pastebin.com/B5dyWhaB – Outofdate

regarding to slideDown(): there a two issues in your code, 1. slideDown() makes hidden elements visible with a sliding animation. If the element is already visible, it won't have any effect. The 2. before() returns nor the inserted object, it returns the object which receives the new object, in your case it will be #comment-box. I Made a fiddle with example:jsfiddle.net/doktormolle/4ZpC3 – Catina

@Alastair Pitts: of course it's all inside the manual, but in my mind jQuery is alongside all benefits also a great tool for people that are not very familiar with JS/DOM. If you assume this it may not be very easy to find the right method, so it's normal that you first look for something like prepend(ing) . If you know the DOM you know that the comparable method is called (insert)Before and will find the right jQuery-method very quick. – Catina

@Dr.Molle: I disagree, the jQuery documentation is very clear on what methods do what and have a bunch of examples. Maybe it's just the way I find information, but if I don't know a jQuery method, the first place I look is the jQuery documentation. – Mallen

@Alastair Pitts: in my mind the documentation could be clearer. The method that solves the issue here does a kind of prepending, but the use of the search in jquery-docs does'nt give a link to "before" when searching for "prepend". It also does'nt give a link to anything if you search for "before" : docs.jquery.com/Special:Search?search=before . That is not really "clear". Yes, you can read through the whole overview of manipulation-methods and find out the right method, but it's not very comfortable. @Harsha: Do not mention it :) – Catina

Answer 2

Wouldn't this make more sense?:

$('ul#comments_container').prepend('<li id="4"></li>');

or

$('<li id="4"></li>').hide().prependTo('Ul#comments_container').slideDown("slow");

This would allow you to add it to the beginning of a ul list to put it at the end of the list just use 'append' rather than 'prepend' or 'appendTo' also works.

Hoplite

Thanks for the alternative :) – Outofdate

Answer 3

It is uncommon to have a sequential id attached to elements but a likely case would be inserting at a specific index of a unknown length of matching elements.

If you know how many items are in the list then you can use nth-child or :eq to directly access the item without needing to couple your markup class names or id's into the jQuery selector.

$('li:nth-child(3)') selects the third <li> while $('li:eq(3)') selects the fourth because :eq is zero based.

In your case my preference would be the following

$('li:last').prepend('<li>Fourth item</li>');

Here is a fiddle

Chamois

Answer 4

If you strictly want to use the .prepend(), the following will help you:

// this gives you a list with all matching elements
var elementsList = $("li");  

// this refers to an element at required index and wraps it into a jQuery object           
var elementAtIndex = $(elementsList[your index]);   

// and finally apply change
elementAtIndex.prepend("<li id=\"4\"></li>");

OR

The same, using .eq(), which will be more elegant after you got the main idea. .eq allows you to refer at particular index.

 var elementAtIndex= $("li").eq(your index);  
 elementAtIndex.prepend("<li id=\"4\"></li>");

And finally we came to the final short variant:

 $("li").eq(index).prepend("<li id=\"4\"></li>"); 

Clevey