将 span 标签转换为文本框，其中包含值答案

【问题标题】：Convert span tag to textbox with value inside it将 span 标签转换为文本框，其中包含值
【发布时间】：2014-11-26 13:10:11
【问题描述】：

我将编辑这些字段。当用户单击编辑时，我希望将信息转换为具有先前值的文本框，但我遇到了问题。下面的代码是我尝试过的。它提供 HTML 标签而不是显示文本框。我怎样才能做到这一点。谢谢。

jQuery

  $(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
   $("#name").text(x);
   $("#city").text("<input type='text' value='" + city + "'>");
   $("#mob").text("<input type='text' value='" + mob + "'>");
});

HTML

 <li class="list-group-item"> <b>Name:</b> <span class="inf" id="name">Some name</span> <span class="label label-info edit">Edit</span> </li>
    <li class="list-group-item"> <b>Current City:</b> <span class="inf" id="city"> City name</span>  </li>
    <li class="list-group-item"> <b>Mobile Number:</b> <span class="inf" id="mob"> mobile number </span> </li>

【问题讨论】：

为什么你的'HTML'里面有php？如果这是 JavaScript，则显示呈现的 HTML（如浏览器所见） php 无关紧要。
文本来自数据库，所以我忘了编辑。好的，我正在编辑问题。
谢谢，非常感谢。
如果您输入的值中包含< 或> 字符，这可能会中断。
@Ja͢ck 那么我该如何处理这些错误，或者是否有任何其他方式来处理我的逻辑。

标签： jquery html

【解决方案1】：

使用 .html() 而不是 .text()

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
    var x = '<input type="text" value="' + name + '">';
    $("#name").html(x);
    $("#city").html("<input type='text' value='" + city + "'>");
    $("#mob").html("<input type='text' value='" + mob + "'>");
});

因为您希望在特定元素上看到 html 元素，请使用 .html()

【讨论】：

哦，真是个愚蠢的错误。我没有照顾财产。谢谢。

【解决方案2】：

试试这个代码：

HTML：

<li class="list-group-item"> <b>Name:</b> <br/><span class="inf" id="name"><?php echo $uinfo->name; ?></span>  </li>
<li class="list-group-item"> <b>Current City:</b><br/> <span class="inf" id="city"><?php echo $uinfo->current_city; ?></span>  </li>
<li class="list-group-item"> <b>Mobile Number:</b><br/> <span class="inf" id="mob"><?php echo $uinfo->m_number; ?></span> </li><br/>
<span class="label label-info edit">Edit</span>

JS：

$(".edit").on('click',function(){
    var name = $("#name").text();
    var city = $("#city").text();
    var mob = $("#mob").text();
   $("#name").html("<input type='text' value='" + name + "'>");
   $("#city").html("<input type='text' value='" + city + "'>");
   $("#mob").html("<input type='text' value='" + mob + "'>");
});

这里是直播DEMO供您参考

【讨论】：

【解决方案3】：

在jquery中使用replaceWith()，改变属性、值、id

$(".edit").on('click', function () {
    $(".inf").each(function () {
        $(this).replaceWith(function (i, text) {
            return $("<input>", { // change the type
                type: "text",
                value: text, // getting span text 
                id: this.id // getting span id
            })
        });
    });
});

DEMO

【讨论】：