如何使用javascript替换textarea元素

How to replace an element by textarea using javascript

本文关键字：textarea 元素 替换 javascript 何使用      更新时间：2023-09-26

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

如果用户单击该按钮，那么他/她可以编辑描述字段本身，后端将使用Ajax更新。ajax调用和后端处理很简单，但是我如何用textarea和submit按钮替换html，并再次使用javascript放回原始html。

这是我的html的样子

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

当有人点击editButton时，我想用textarea替换personalText内的html，其中包含descText中的原始文本，以及update按钮。当用户编辑文本并单击更新时，我将更新后端模型，并再次放置<a>标记和<p>标记。

有人能帮忙吗?我似乎知道如何做它的一部分，但不能弄清楚我将如何取代原来的结构在update点击。

与其创建/销毁DOM元素，不如隐藏编辑<textarea/>。

<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>

然后你的jQuery可以简单地切换元素并处理你的ajax post。

$("input[type='submit']").on("click", function() {
    $.ajax({
        url:"/your/url/"
    }).success(function(){
        $(".display, .edit").toggle();
        $("#descText").html($("textarea").val());
    });
    return false;
});

jsfiddle

示例
$('#editButton').click(function(){
  var text = $('descText').text();
  var textArea = $('<textarea></textarea>');
  textArea.value = text;
  $('#personalText').replaceWith(textArea);
});
相关文章：