Javascript automatically closes form

Question

I want to make a table row into a form with a button. I want to put the form closing tag at the end of the table row. But it is always set directly after the form opening tag.

I don't know if it's related to the fact that I remove a form when overwriting cell 0. But I actually did that before.

I also tried to remove the form-closing tag but it remains there.

function editRow(sequence){
sequence -= 1;
table = document.getElementById("mainSiteTable");


table.rows[sequence].cells[0].innerHTML = "<input id ='number' name='sequence' type='number' value='" + (sequence+1) + "'>";

row = document.getElementById("trSequence"+(sequence+1));
row.innerHTML = "<form action='mainsite.php?country=<?= $country?>' method='POST' enctype='multipart/form-data'>" + row.innerHTML;
row.innerHTML.replace("</fom>","");
row.append("</form>");

table.rows[sequence].cells[2].innerHTML = "<input type='text' value='" + table.rows[sequence].cells[2].innerHTML + "'>";
}

Answer 1

You want to build the string before you add it into the html.

row = document.getElementById("trSequence"+(sequence+1));

const formString = "<form action='mainsite.php?country=<?= $country?>' method='POST' enctype='multipart/form-data'>" + row.innerHTML + '</form>

row.innerHTML.replace(formString);