jQuery replaceWith 显示文本而不是元素

Question

我有以下 jQuery 可以用选择字段替换输入字段。

input = $("input[id$='id_var']")[0];
input_class = input.getAttribute("class");
input_id = input.getAttribute("id");
input_name = input.getAttribute("name");
//remove input and replace with a select drop down
input.replaceWith("<select class='"+input_class+"' id='"+input_id+"' name='"+input_name+"'></select>");

它在我加载页面时运行。但不是用选择的 html 替换元素，它只是用 html 作为文本替换它:

"<select class='input_class_text' id='input_id_var' name='input_name_text'></select>"

所以在页面上而不是你只看到的选择

<select class='input_class_text' id='input_id_var' name='input_name_text'></select>

上述行为的片段:

input = $("input[id$='id_var']")[0];
input_class = input.getAttribute("class");
input_id = input.getAttribute("id");
input_name = input.getAttribute("name");
//remove input and replace with a select drop down
input.replaceWith("<select class='"+input_class+"' id='"+input_id+"' name='"+input_name+"'></select>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="id_var" type="text" />

谁能告诉我为什么会这样？

谢谢

Answer 1

您是在 DOM 元素上调用 .replaceWith()，而不是在 JQuery 对象上。只需编辑您的第一行:

input = $("input[id$='id_var']");

然后像这样调整你的下一行:

input_class = input.attr("class");
input_id = input.attr("id");
input_name = input.attr("name");