Javascript 在运行时将input type=text.outerHTML（）替换为新的outerHTML（）

您好，我正在尝试用运行时构建的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>

上面的代码片段是jQuery选择器的

outerHTML

我正在尝试以下操作：

element.outerHTML（newelement.outerHTML（））

我的问题是
element.outerHTML（）
没有改变

请提供任何帮助。
您要使用的是
.replaceWith（）
：

var元素=$（“#字段_189”），
新元素=“”；
元素。替换为（新元素）；

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);