Adding elements before another element

Question

I have an app where I can add input fields dynamically. however my buttons remain on their spot and I create 2 input fields underneath it.

What I would like to try and to achieve is: When I add the input fields I want the button to be underneath the input fields.

this is the function that creates the button.

function getAddBtn(target, i){
 var addBtn = $('<a/>', {
                'class': 'btn btn-primary',
                'id': 'addBtn'
            }).on('click', function(){
 if($('.syllable',target).length>3)
      return false;
 $(target).append(getWordPartInput(i));
}).html('<i class="fa fa-plus"></i>');
            console.log(target);
 return addBtn;
}

and this is the function that creates the input fields:

function getWordPartInput(id, cValue){
 cValue = cValue || '';
 var wpInput = $('<input/>', {
'class': 'form-group form-control syllable',
'type': 'text',
'value': cValue,
'placeholder': 'Syllables',
'name': 'Syllablescounter['+ SyllablesID++ +']'
 });
  return wpInput;
}

https://jsfiddle.net/StackOverflowAccount/sa2eowhh/21/ a fiddle for you to try it urself and see what I mean. Click on the green add button, and then you see 2 buttons, a + button and a - button. Click the blue button and you can see how the input fields jump underneath the button instead of adding in between. I'm trying to keep the input fields underneath each other instead of having buttons in between.

thanks in advance.

I see that your buttons and input fields are in the same level of hierarchy. Add a container between the buttons groups and insert the fields into the special container. — Serg
– Serg, Commented Jun 25, 2018 at 7:31

Vignesh Raja · Accepted Answer · 2018-06-25 07:41:08Z

2

It can be done simply by replacing the line in the method getAddBtn.

Replace $(target).append(getWordPartInput(i)); by $(getWordPartInput(i)).insertBefore($(target).find("#addBtn").prev());

For more info refer insertBefore in jQuery

Edit : Updated Fiddle

answered Jun 25, 2018 at 7:41

Vignesh Raja

8,9112 gold badges38 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

D.Sof Over a year ago

oke, and would I be able to create the input fields with directly 4 instead of 2 with this method? So instead of having the add and minus button, I just instantly get 4. Or can't this be used then?

Vignesh Raja Over a year ago

Then in that case, you have to edit the number fields appending through the getExerciseBlock method.

Ajay Jangra · Accepted Answer · 2018-06-25 07:48:45Z

0

$(document).ready(function() {
  var id = 0;
  var addOpdracht = $('<a/>', {
    'class': 'btn btn-success',
    'id': 'addOpdracht'
  }).on('click', function() {
    $('#my_form').prepend(getExerciseBlock(id));
    $(".exerciseGetWordInput_" + id).focus().select();
    id++;
    exerciseAudioInput++;
  }).html('<i class="fa fa-plus fa-2x"></i>');

  $('#my_form').append(addOpdracht);
  $('#my_form').append(getExerciseTitle());
});

answered Jun 25, 2018 at 7:48

Ajay Jangra

1741 silver badge14 bronze badges

2 Comments

Ajay Jangra Over a year ago

change in your code $('#my_form').append(getExerciseBlock(id)); to $('#my_form').prepend(getExerciseBlock(id)); as i changed in your code

Vignesh Raja Over a year ago

The OP needs to add the input fields before the add button.

Collectives™ on Stack Overflow

Adding elements before another element

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related