Js / jQuery函数在firefox

Question

/！\编辑/！\
基本上我有一个 html表，我想添加条目到这个表。所以我的功能可以在顶部或底部添加一行特定行。我称之为附加display = table-row 表单的函数，我在这个表单上有一个事件，我可以使用jQuery处理提交。
所以：

我有一个包含多行的表格，每行都有一个包含onclick事件的单元格，如：

<td class="edit_td"> <span class="edit2 up" onclick="addTop(\'' + child[0] + '_child_id' + '\')"></span> <span class="edit2 down" onclick="addBottom(\'' + child[0] + '_child_id' + '\')"></span> <a class="delete2" href="#" onclick="removeChildFromStructure(\'' + $('#dyn_struct_id').html() + '\', \'' + child[0] + '\')"><span class="fa fa-trash"></span></a></td>

然后例如我有addTop函数：

function addTop(rowId)
{
    console.log("ROW ID = " + rowId);

    // We can add only one row at the same time
    if($('#structure_tbody > form.new_tr').length){return -1;}

    // Some hidden data
    var brol = '<input type="hidden" id="isChildUpdate" name="isChildUpdate" value="false"/>';
    brol += '<input type="hidden" id="parent_id" name="parent_id" value="' + $('#dyn_struct_id').text() + '"/>';
    brol += '<input type="hidden" id="child_id" name="child_id" value="-1"/>';
    console.log("BROL = " + brol);

    // This will be the identifier of the new created row
    var new_row_id = (($('#' + rowId).index() + ($('#' + rowId).index() - 1)) / 2) + 1;
    console.log("NEW_ROW_ID = " + new_row_id);

    // Id of the copied row element
    var childId = rowId.split('_')[0];
    console.log("CHILD ID = " + childId);

    var form = $('<form id="add_structure_child_row" class="new_tr tr-form" name="add_update_child_form"></form>');
    form.append('<td class="struct_id_field"><input type="hidden" id="new_place_id" name="new_place_id" value="' + new_row_id + '"/><span>#</span></td>');
    form.append('<td id="' + childId + '_child_tag_copy"><input class="no-spaces-no-null" type="text" name="add_update_child_tag" id="add_update_child_tag" placeholder="Ex.: BDP" autofocus/></td>');
    form.append('<td id="' + childId + '_child_opt_copy"><input type="checkbox" id="add_update_child_optional" name="add_update_child_optional"/></td>');
    form.append('<td id="' + childId + '_child_rep_copy"><input type="checkbox" id="add_update_child_repetitif" name="add_update_child_repetitif"/></td>');
    form.append('<td id="' + childId + '_child_struct_copy"><select name="add_update_child_id" id="add_update_child_id"></select></td>');
    form.append('<td id="' + childId + '_child_description_copy"><input type="text" name="add_update_child_descr" id="add_update_child_descr" placeholder="Description"/></td>');
    form.append('<td id="' + childId + '_auteur_email_copy"><span class="disabled">Auteur</span></td>');
    form.append('<td id="' + childId + '_child_modif_date_copy"><span class="disabled">Date</span></td>');
    form.append('<td class="edit2_td">' + brol + '<button type="submit" class="edit3 little-btn-submit" form="add_structure_child_row" href="#" name="add_update_doc_submit"><i class="fa fa-check"></i></button><button type="button" href="#" onclick="removeRow()" class="delete3 little-btn-delete"><i class="fa fa-trash"></i></button></td>');

    console.log("FORM = " + $(form).html());

    $(form).insertBefore($('#' + rowId));
    $('#add_update_child_id').select2({tags:true}).select2('val', '-1');
    populateSelect('add_update_child_id', 'structures');

    console.log("--- END ---");
}

问题是我的代码运行良好（display = table-cell附加到表格的表单）： Chrome：在版本58.0.3029.110（64位）上测试 IE：在版本11.0.9600.18665上测试

但不适用于Firefox（在49.0.2版本上测试）

此方法包含的console.log(...)的输出在firefox和chrome上是相同的。我可以看到firefox将表单添加到表中但他没有显示：