解析内部有html的文本

Question

我有以下文字

let text = "La altura del Monte Everest es <select class='cs-select cs-skin-slide' id='memorySelect'></select> y es por eso considerado el monto más alto del mundo"

通过JS添加选择选项后，我将其添加到我的身体中。

$('body').html(text)

所以我的结果是以下

问题出在哪里！我的字符串是否需要在文本的 MIDDLE 中解析HTML，最后 NOT

所以结果将是以下

为什么HTML会崩溃？我尝试了同样的3个HTML结构，所有3个都下来了，文本仍然在顶部。

更新： 这是SELECT的CSS

display: inline;
vertical-align: middle;
position: relative;
text-align: left;
z-index: 100;
background: #292f33;
max-width: 500px;
user-select: none;

Answer 1

尝试这样做：

let text = "<p>La altura del Monte Everest es </p><select class='cs-select cs-skin-slide' id='memorySelect'></select><p>y es por eso considerado el monto más alto del mundo</p>"

然后以内联方式显示元素。应该工作：）

Answer 2

你的CSS是什么样的？ select元素是否显示为内联？另请考虑将文本包装在<p>标记中。因为没有CSS的代码按预期工作：

let text = "La altura del Monte Everest es <select class='cs-select cs-skin-slide' id='memorySelect'></select> y es por eso considerado el monto más alto del mundo"

$('body').html(text)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>