原生JS Element.append()向select追加option无效但jQuery append()生效原因

两种append()方法的参数处理逻辑存在本质差异，和<select>元素本身的特殊行为无关：

• 原生Element.append()是浏览器提供的标准DOM API，仅接受Node节点对象或纯文本作为参数。如果传入字符串类型参数，API会直接将其作为纯文本创建文本节点插入，不会执行任何HTML解析逻辑。你传入的option模板字符串会被直接当作文本内容渲染，自然不会生成真实的option下拉选项。
• jQuery的append()是jQuery库封装的方法，内部做了参数类型判断：如果检测到传入的是符合HTML格式的字符串，会先调用内置的DOM解析逻辑将字符串转换为真实的DOM节点对象，再执行节点插入操作，因此传入的option模板可以被正常解析渲染。

不需要依赖jQuery，用原生API也可以实现HTML字符串的插入，以下三种方式都可以正常生成option选项：

• 使用insertAdjacentHTML方法（最推荐，不会破坏已有元素的事件绑定）

const elemStartTime = document.querySelector("#startTimeSelector");
// beforeend 表示插入到元素内部的末尾位置，和append的插入位置一致
elemStartTime.insertAdjacentHTML('beforeend', currentOption);

• 手动创建option节点后插入

const optionElem = document.createElement('option');
optionElem.id = 'startTimeDisplay';
optionElem.style.outlineColor = 'light-blue';
optionElem.disabled = true;
optionElem.selected = true;
optionElem.value = timeValue;
optionElem.textContent = timeValue;
elemStartTime.append(optionElem);

• 拼接innerHTML（注意：该方式会重置元素内部已有子元素的事件绑定，谨慎使用）

elemStartTime.innerHTML += currentOption;

内容的提问来源于stack exchange，提问作者Thomasjd