下拉菜单在html页面中未正确显示

Question

我需要显示输入内容和下拉列表。但是，由于某些原因，输入会显示在页面上，但下拉菜单显示不正确。这是下面的代码

这是下面的屏幕截图

如您所见，输入看起来不错，但下拉列表却没有。有什么问题吗？

let card = ""
card += "<div class='container'>"
card += "<div class='row'>"
card += "<input type='text'"
card += '<select> <option value="time">A</option> <option value="place">B</option> <option value="fee">Fee</option></select>'

card += "</div>"
card += "</div>"

document.querySelector('#app').innerHTML = card

<div id="app">

</div>

Answer 1

更改此内容：

read

对此：

card += "<input type='text'"

Answer 2

let card = ""
card += "<div class='container'>"
card += "<div class='row'>"
card += "<input type='text'>"
card += '<select> <option value="time">A</option> <option value="place">B</option> <option value="fee">Fee</option></select>'

card += "</div>"
card += "</div>"

document.querySelector('#app').innerHTML = card

<div id="app">

</div>

粘贴上面的javascript代码。 如上所述，问题在于您没有关闭输入标签，因此，在输入标签之后编写的所有内容都被视为在同一标签内。

Answer 3

是，标签未正确关闭。 对于html，请关闭输入标签，例如 <input type="text"> 对于xhtml，请关闭输入标签，如 <input type="text"/>