Question

I try to add a fieldset when I’m clicking on a link.

I would that this new element is before my span, because at this moment, elements are add after.

<fieldset id="fieldsetOptions">
 <legend>Options</legend>
 <span>Add an option
   <a onclick="addOption()" href="javascript:return false;">
    <img src="./images/icons/add.png">
   </a>
 </span>
 <fieldset><!--this is the new fieldset, but not at the good place--></fieldset>
</fieldset>

So, you understand : The good result should be this

<fieldset id="fieldsetOptions">
 <legend>Options</legend>
 <fieldset><!--this is the new fieldset, at the good place--></fieldset>
 <span>Add an option
   <a onclick="addOption()" href="javascript:return false;">
    <img src="./images/icons/add.png">
   </a>
 </span>     
</fieldset>

To add the new fieldset, I’m doing this :

<script type="text/javascript">
    function addOption(){
     $("#fieldsetOptions").append("<fieldset></fieldset>");
    }
</script>

Is it possible to add where we want ?

Answer 1

$("#fieldsetOptions legend").after("<fieldset></fieldset>");

That should do the trick. It uses after to insert the new element after the legend child of #fieldsetOptions.