HTML代码在浏览器中发生了变化

Question

我在javascript循环中有以下代码

document.getElementById("alladdress").innerHTML+="<form action=\"updateUserInfo\" method=\"POST\">";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"id\" value="+id+" hidden><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"contact\" value="+contact+"><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"add\" value="+add+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"city\" value="+city+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"zip\" value="+zip+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"text\" name = \"state\" value="+state+" ><br>";
document.getElementById("alladdress").innerHTML+="<input type=\"submit\" value=\"Edit Address\"><br>";
document.getElementById("alladdress").innerHTML+="</form>";

但是当我在浏览器中检查时，结尾表单标签会附加在表单标签的末尾（请参阅下面的第一行）因为这个我的提交按钮不起作用请帮我弄清问题是什么。

在我的浏览器的元素选项卡中，它显示如下

<form action="updateUserInfo" method="POST"></form>
<input type="text" name="id" value="1" hidden=""><br>
<input type="text" name="contact" value="ijkl"><br>
<input type="text" name="add" value="abcd"><br>
<input type="text" name="city" value="efgh"><br>
<input type="text" name="zip" value="xyza"><br>
<input type="text" name="state" value="mnop"><br>
<input type="submit" value="Edit Address"><br>

Answer 1

浏览器将尝试修复无效的HTML，这意味着关闭未关闭的标签。请注意您的第一行：

document.getElementById("alladdress").innerHTML+="<form action=\"updateUserInfo\" method=\"POST\">";

创建无效代码。浏览器会立即为您关闭该标签。

如果您希望它的行为正确，请构建整个HTML字符串并执行单个innerHTML分配：

const html = "<form action=\"updateUserInfo\" method=\"POST\">"
    + "<input type=\"text\" name = \"id\" value="+id+" hidden><br>"
    + "<input type=\"text\" name = \"contact\" value="+contact+"><br>"
    + "<input type=\"text\" name = \"add\" value="+add+" ><br>"
    + "<input type=\"text\" name = \"city\" value="+city+" ><br>"
    + "<input type=\"text\" name = \"zip\" value="+zip+" ><br>"
    + "<input type=\"text\" name = \"state\" value="+state+" ><br>"
    + "<input type=\"submit\" value=\"Edit Address\"><br>"
    + "</form>";
document.getElementById("alladdress").innerHTML += html;

Answer 2

Mayby开始自动标记。尝试保存字符串变量而不是innerHtml这个值。

var block = document.getElementById("alladdress");
var str = '';
var id = 1, contact = 'default', add='true', city = 'NY', zip = 'true', state = '-';

str+="<form action=\"updateUserInfo\" method=\"POST\">";
str+="<input type=\"text\" name = \"id\" value="+id+" hidden><br>";
str+="<input type=\"text\" name = \"contact\" value="+contact+"><br>";
str+="<input type=\"text\" name = \"add\" value="+add+" ><br>";
str+="<input type=\"text\" name = \"city\" value="+city+" ><br>";
str+="<input type=\"text\" name = \"zip\" value="+zip+" ><br>";
str+="<input type=\"text\" name = \"state\" value="+state+" ><br>";
str+="<input type=\"submit\" value=\"Edit Address\"><br>";
str+="</form>";
block.innerHTML = str;

<div id="alladdress"></div>

Answer 3

这是因为浏览器本身会尝试平衡标签。

或者，您可以使用template literals创建模板

document.getElementById("alladdress").innerHTML += "<form 
action=\"updateUserInfo\" method=\"POST\">";

<div id="alladdress"></div>

var id = 'testId';
var contact = 'contact';


document.getElementById("alladdress").innerHTML = `<form action="updateUserInfo" method="POST">
 <input type="text" name ="${id}" value="+${id}+" hidden><br>
 <input type="text" name = "contact" value="+${contact}+"><br>
</form>`;

<div id="alladdress"></div>

Answer 4

当单独添加每一行时，浏览器会尝试修复您的代码。我建议使用qazxsw poi，所以你不必为逃避字符而烦恼，并用一个变量附加所有字符。

template-strings

Answer 5

您也可以将每一行放入一个数组中，最后将它们连接起来。

const html = `
<form action="updateUserInfo" method="POST">
    <input type="text" name="id" value="${id}" hidden><br>
    <input type="text" name="contact" value="${contact}"><br>
    ....
</form>
document.getElementById('alladdress').innerHTML += html;
`

var id=34,contact="Tom",add="asdf",city="NY",zip="12356",state="NY";
var form = Array();
form[0]="<form action=\"updateUserInfo\" method=\"POST\">";
form[1]="<input type=\"text\" name = \"id\" value="+id+" hidden>";
form[2]="<input type=\"text\" name = \"contact\" value="+contact+">";
form[3]="<input type=\"text\" name = \"add\" value="+add+" >";
form[4]="<input type=\"text\" name = \"city\" value="+city+" >";
form[5]="<input type=\"text\" name = \"zip\" value="+zip+" >";
form[6]="<input type=\"text\" name = \"state\" value="+state+">";
form[7]="<input type=\"submit\" value=\"Edit Address\">";
form[8]="</form>";

document.getElementById("alladdress").innerHTML = form.join('<br>',form);