javascript - 单击按钮更改 HTML 标记

Question

我正在为一个元素创建一个客户表单，当我显示它们时，我希望用户能够点击一个按钮来编辑客户的数据。 这是我需要的东西:

<span>Customer_name</span>
<span>Customer_surname</span>
<span>...</span>
<button>Click me to turn spans into inputs</button>

当用户点击按钮时，我希望 span 变成输入。 我们将不胜感激!

Answer 1

你想要这样吗？

HTML

<div class="customerdata">
    <span>Customer_name</span>
    <span>Customer_surname</span>
    <span>...</span>
    <button class="editbtn">Click me to turn spans into inputs</button>
</div>

js

$(document).ready(function (){
    $(document).on("click",'.editbtn',function (){
        $(this).closest(".customerdata").find('span').attr("contenteditable","true");
    });

});

fiddlelink