Question

我第一次参加HTML + AJAX + JQUERY课程。我们有一个包含一周中几天的数组（arrWeek）。尝试将日期添加到Option元素时，我们首先选择按照以下步骤将选项添加到选择：

objSelect.innerHTML+= '<option value="' + i + '">'; 
objSelect.innerHTML += arrWeek[i];
objSelect.innerHTML += '</option>\n';
console.log(arrWeek[i],objSelect.innerHTML);

恰好在控制台中显示以下结果：

<option value="-1">-- Choose a day --</option>
<option value="0"></option>Monday
<option value="1"></option>Tuesday
<option value="2"></option>Wednesday
<option value="3"></option>Thursday
<option value="4"></option>Friday
<option value="5"></option>Saturday
<option value="6"></option>Sunday

请注意 /选项之后的日期名称。

最后我们管理（当然）以不同的方式做，为objSelect获得正确的结果。但是我们想知道是否有人可以帮助为什么变量被置于 AFTER （？！？！？！）。

非常感谢你们！

Answer 1

尝试以下操作（一次添加字符串）

objSelect.innerHTML += `<option value="${i}">${arrWeek[i]}</option>\n`;

为什么以前可能没有用过，可能是：

让开头的innerHTML为<option value="-1">-- Choose a day --</option>

现在，当你做objSelect.innerHTML+= '<option value="' + i + '">';时，innerHTML变为

<option value="-1">-- Choose a day --</option>
<option value="0"> // here

现在，由于最后一个选项标签没有关闭，它可能会自动添加以下内容（没有您的帮助），并将字符串变为

<option value="-1">-- Choose a day --</option>
<option value="0"></option>

然后在objSelect.innerHTML += arrWeek[i];

中添加下一行

它变成了

<option value="-1">-- Choose a day --</option>
<option value="0"></option>Monday

然后当您在结尾处添加</option>标记时，它会忽略它，因为它在代码中没有位置（没有option标记可以关闭）

这都是因为浏览器会在您更改后立即解析html！

下次使用appendChild（）和document.createElement（）代替！

Answer 2

浏览器会在HTML更改后立即解析HTML，因此当您第一次将<option value="...">写入内部HTML时，浏览器将在您尝试添加内容的下一行之前解析它。当它解析它时，浏览器将看到一个未关闭的标签，然后为您关闭它。在自动关闭的标记之后添加变量，结束标记被忽略，因为它没有关联的开始标记。

您可以通过将完整的<option>标记（包括其内容）整合在一起来修复它：

objSelect.innerHTML+= '<option value="' + i + '">' + arrWeek[i] + '</option>\n';

但实际上，通过使用document.createElement()和.appendChild()直接操作DOM来做这些事情是一个更好的主意：

var opt = document.createElement('option');
opt.value = i;
opt.appendChild(document.createTextNode(arrWeek[i]));
objSelect.appendChild(opt);

Answer 3

我将提到Mikael的评论，以澄清解决方案：

“浏览器一改变就解析HTML，所以当你第一次写入内部HTML时，浏览器会在尝试添加内容的下一行之前解析它。当它解析它时，浏览器将会看到一个未关闭的标签，然后为你关闭它。变量在这个自动关闭的标签之后被添加，结束标签被忽略，因为它没有关联的开始标签“

感谢@Mikael Lennholm的回答。完全清楚!!!还要感谢您提供替代解决方案!!!

Javascript变量与innerHTML中的字符串一起添加在错误的位置

3 个答案: