javascript - 在运行时将 input type=text.outerHTML() 替换为 new outerHTML()

Question

美好的一天，我正在尝试用运行时构建的 jQuery 选择器替换outerHTML输入元素的。outerHTML输入元素如下所示：

<INPUT class=ajaxupload id=field_189 type=text value=001.JPG|/Accounts/documents/generic/379a30cc-26b9-4660-b9ac-8fbebe66c5dd.JPG>

上述元素需要替换为以下内容：

<SPAN class=ajaxUpload-container-parent id=field_189_container>
<SPAN class=ajaxUpload-container>
<A class=\"Buttons ajaxUpload-button\" id=field_189_button href=\"javascript:void(0);\">Upload File</A>
<INPUT name=ajaxfile class=ajaxUpload-file id=field_189_file style=\"ZOOM: 1; FILTER: alpha(opacity=0)\" type=file>
<INPUT name=field_189_hidden id=field_189_hidden type=hidden value=001.JPG|/Accounts/documents/generic/379a30cc-26b9-4660-b9ac-8fbebe66c5dd.JPG>
</SPAN>

上面的代码片段是outerHTML一个 jQuery 选择器。

我正在尝试以下操作：element.outerHTML(newelement.outerHTML());

我的问题是element.outerHTML()没有改变。

请提供任何帮助。

Answer 1

您要使用的是.replaceWith()：

var element = $('#field_189'),
    newelement = '<span class="ajaxUpload-container-parent" id="field_189_container"><span class="ajaxUpload-container"><a class="Buttons ajaxUpload-button" id="field_189_button" href="javascript:void(0);">Upload File</a><input name="ajaxfile" class="ajaxUpload-file" id="field_189_file" style="zoom: 1; filter: alpha(opacity=0);" type="file"><input name="field_189_hidden" id="field_189_hidden" type="hidden" value="001.JPG|/Accounts/documents/generic/379a30cc-26b9-4660-b9ac-8fbebe66c5dd.JPG"></span>';

element.replaceWith(newelement);