使用Java脚本或jQuery将HTML按钮替换为HTML输入标签

Question

我在具有唯一ID的表格的所有行的第一列中都有HTML按钮 。 我想从ajax的成功中用输入标签替换特定id的按钮。

<td>
    <button class="btn btn-success" id="1" type="button">Verify</button>
</td>

从ajax成功开始，我想在ID 1的td中将按钮替换为下面

<input type='text' name='someName' value='some value from ajax response'>

我尝试使用替换但无法正常工作

var html = '<input type="text" name="someName" value="some value from ajax response">';

var parent = document.getElementById(1).parentNode;

parent.innerHTML=parent.replaceChild(html,parent.childNodes[0]);

Answer 1

一个简单的解决方案是设置HTML

 var html = '<input type="text" name="someName" value="some value from ajax response">'; var parent = document.getElementById('1').parentNode; parent.innerHTML = html; 

 <table> <td> <button class="btn btn-success" id="1" type="button">Verify</button> </td> </table> 

Answer 2

对于此示例，您可以使用parent.innerHTML = html

replaceChild需要一个节点，而不是html字符串。 因此，为了更接近您的原始想法，您可以

 node = document.createElement("input");
 node.id = ...; // set other properties
 parent.replaceChild(node, parent.firstElementChild);

Answer 3

您可以使用jQuery.fn.replaceWith()

 var html = '<input type="text" name="someName" value="some value from ajax response">'; $("#1").replaceWith(html); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btn btn-success" id="1" type="button">Verify</button> 

Answer 4

您可以使用条件语句来解决此问题。

(Your Condition) ? <button class="btn btn-success" id="1" type="button">Verify</button> : <input type='text' name='someName' value='some value from ajax response'>