javascript - 在另一个元素之前添加元素

Question

我有一个可以动态添加输入字段的应用程序。但是我的按钮仍保留在原位，并且我在其下方创建了 2 个输入字段。

我想尝试并实现的是:当我添加输入字段时，我希望按钮位于输入字段下方。

这是创建按钮的函数。

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;
}

这是创建输入字段的函数:

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/一个 fiddle 让你自己尝试一下，看看我的意思。单击绿色的添加按钮，然后您会看到 2 个按钮，一个 + 按钮和一个 - 按钮。单击蓝色按钮，您可以看到输入字段如何在按钮下方跳转，而不是在按钮之间添加。我试图将输入字段保持在彼此下方，而不是在它们之间放置按钮。

提前致谢。

Answer 1

只需替换方法 getAddBtn 中的行即可完成。

将 $(target).append(getWordPartInput(i)); 替换为 $(getWordPartInput(i)).insertBefore($(target).find("#addBtn") .prev());

有关更多信息，请参阅 insertBefore in jQuery

编辑:Updated Fiddle