How to append before last li in dropdown list

Question

I am using the following form builder (http://dontlink.me/formbuilder/) and making lots of changes to it to work the way I want.

One of the things I want it to do is when you add a new form field, I want that form field to be placed at the bottom of the list... At the moment they are placed at the top.

This is the code that adds the new li to the list... I've simplified it down to the part that actually does the adding...

var result = '<li>The new form field code goes here....</li>';
var into = $("#form_builder_panel ol");
$(into).prepend(result);

For some reason by default they add an "li" tag into the code and give it a class of 'last-child'.

<div id="form_builder_panel">
<form method="post" action="preview.php" class="fancy">

    <fieldset class='sml'>
     <legend>Built Form</legend>
     <ol>
      <li class="last-child"></li>
     </ol>
    </fieldset>

Now I tried changing that third line of code to the following:

$(into).append(result);

But that then puts the 'last-child' li at the top and the script stops working...

So my question is, how do I make it so that it appends a new li to the list but adds it above the 'last-child' li?

Hopefully I am making sense :)

Answer 1

does $(into).innerHtml = result; work?

Answer 2

What about

before function

Insert content before each of the matched elements.

$(".last-child").before(result);

If you want to append it as the last li each time then remove the class 'last-child' from the li and use the :last-child selector like

$(".sml li:last-child").after ( result );