Javascript 如何将文本框动态添加到单击编辑的文本部分？

我正在创建一个网页。我的账户页面或多或少类似于“Facebook”的账户页面

我的页面的图像：

在这个页面中，我想在我单击编辑的文本部分动态添加一个文本框。

---

我知道我可以通过转到一个新页面来实现同样的效果，但我希望在同一页面中动态执行此操作。

只需将文本框设置为禁用或只读，然后使用JQuery来启用它，从而触发单击（编辑）事件。你可以试试这样的

<input type='text' name='username' id='user' readonly> <a href='#' id='edit_user'>Edit</a>
<script type='text/javascript'>
    $(document).ready(function()
    {
         $('#edit_user').click(function()
         {
             $('#user').removeProp('readonly');
         });
    });
</script>

$（文档）.ready（函数（）
{
$（“#编辑用户”）。单击（函数（）
{
$（“#user”）.removeProp（'readonly'）；
});
});

事实上，我对jquery还不熟悉。你可以发布jquery代码来实现它吗。@SouravmoyGorai你能接受我的答案吗？这个问题就要结束了。tnx。只需点击我答案旁边的复选按钮。