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" />

有人可以告诉我为什么会发生这种情况吗？

谢谢

- Ruth Young

Answer 1

你正在调用 .replaceWith() 方法来操作一个 DOM 元素，而不是 jQuery 对象。请修改你的第一行代码：

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

然后将您的下一行适当修改如下：

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

- Zenoo