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

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

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

objSelect.innerHTML+=''；
objSelect.innerHTML+=arrWeek[i]；
objSelect.innerHTML+='\n'；
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获得了正确的结果。但是，我们想知道是否有人可以帮助我们了解为什么变量被置于（？！？！）之后

非常感谢大家

尝试以下操作（立即添加字符串）

然后，当您在末尾添加

标记时，它会忽略它，因为它在代码中没有位置（没有要关闭的

选项

标记）

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

---

下次，请改用appendChild（）和document.createElement（）

浏览器会在HTML更改时立即解析它，因此当您第一次将

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

您可以通过将完整的

标记（包括其内容）写入一个目录来修复它：

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

---

我将提及Mikael的评论，以明确解决方案：

“浏览器会在HTML发生变化时立即对其进行解析，因此当您第一次写入内部HTML时，浏览器会在您尝试添加内容的下一行运行之前对其进行解析。当它解析它时，浏览器将看到一个未关闭的标记，然后为您关闭它。变量被添加在此自动关闭的标记之后，结束标记被忽略，因为它没有关联的开始标记“

---

感谢@Mikael Lennholm的回答。非常清楚！！！还感谢您提供其他解决方案！！！

有趣的问题，我相信当您这样做时，

objSelect.innerHTML+=''；

浏览器会自动关闭标记本身（在这短暂的一刻，打开标记就是其中的全部内容）。然后，您可以在第二天追加，并且

+='

可能不会起任何作用。要解决此问题，您可以一次追加整个字符串，或者使用一个临时字符串，该字符串在以后完全构建时指定。通常还建议使用document.createElement并为其指定值/文本节点，而不是innerHTMLs。感谢@Mikael Lennholm的帮助回答。非常清楚！！！也感谢您提供其他解决方案！！！

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

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

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

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

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