如何使用javascript用textarea替换元素

我所做的基本上是一个用户配置文件，其中有一个文本框，用于用户添加关于他/她自己的描述。虽然我有一个单独的页面，用户可以在其中编辑配置文件，但我想提供一个功能，当用户将鼠标悬停在其描述框上时，他会看到一个

编辑

按钮

如果用户单击该按钮，那么他/她可以编辑描述字段本身，并且后端将使用Ajax进行更新。ajax调用和后端处理很简单，但是如何用

textarea

和

submit

按钮替换

html

，然后使用javascript再次放回原始html

下面是我的html的样子

<div id="personalText" >
    <a href="#" id="editButton"> edit </a>
    <p id="descText">{{profile.desc}}</p>
</div>

{{profile.desc}

当有人单击

editButton

时，我想将

personalText

中的html替换为

textarea

，其中包含

descText

中的原始文本，以及

update

按钮。当用户编辑文本并单击更新时，我将更新后端模型，并再次放置

标记和

标记

有人能帮忙吗。我似乎知道如何执行部分操作，但不知道如何在

update

click上替换原始结构。

$（“#编辑按钮”）。单击（函数（）{
$('#editButton').click(function(){
  var text = $('descText').text();
  var textArea = $('<textarea></textarea>');
  textArea.value = text;
  $('#personalText').replaceWith(textArea);
});

var text=$（'descText'）.text（）；
var textArea=$（''）；
textArea.value=文本；
$（'#personalText'）。替换为（textArea）；
});

$（“#编辑按钮”）。单击（函数（）{
var text=$（'descText'）.text（）；
var textArea=$（''）；
textArea.value=文本；
$（'#personalText'）。替换为（textArea）；
});

与其创建/销毁DOM元素，还可以选择隐藏编辑

<div id="personalText" >
    <div class="display">
        <a href="#" id="editButton">edit</a>
        <p id="descText">{{profile.desc}}</p>
    </div>
    <div class="edit" style="display:none;">
        <input type="submit" value="Update"/>
        <textarea>{{profile.desc}}</textarea>
    </div>
</div>

---

与其创建/销毁DOM元素，还可以选择隐藏编辑

<div id="personalText" >
    <div class="display">
        <a href="#" id="editButton">edit</a>
        <p id="descText">{{profile.desc}}</p>
    </div>
    <div class="edit" style="display:none;">
        <input type="submit" value="Update"/>
        <textarea>{{profile.desc}}</textarea>
    </div>
</div>

---

非常感谢您提供的解决方案，我从未想到过切换，它似乎是更好的解决方案。您提供的js似乎存在一些问题，它在JSFIDLE上运行良好，但当我在开发服务器上运行

$（“#editButton”）。on（“单击”，函数（）

被触发了两次，结果整个过程切换了两次，显示保持不变。我如何知道发生了这种情况，是因为我在函数内部放置了一个

alert（）

调用，弹出窗口出现了两次。当我删除输入按钮的javasrcipt时，然后是

$（“#editButton”）

js只被触发了一次，但现在文本区域没有显示它应该显示的文本。虽然如果我使用alert看到文本区域的内容，那么文本就在那里，但它没有显示。感谢很多解决方案，我从来没有想到过切换，这似乎是更好的解决方案。js y似乎有一些问题您已经给出，它在JSFIDLE上运行得很好，但是当我在开发服务器上运行

$（“#editButton”）。在（“单击”上，function（）

被触发了两次，结果整个事情切换了两次，显示保持不变。我如何知道发生了这种情况，是因为我发出了

警报（）

在函数内部调用，弹出窗口出现两次。当我删除输入按钮的javasrcipt时，

$（“#编辑按钮”）

js只触发了一次，但是现在文本区域没有显示它应该显示的文本。虽然如果我使用alert看到文本区域的内容，那么文本就在那里，但它不会显示