Как заменить элемент textarea с помощью javascript

Question

Что я делаю, это в основном профиль пользователя, в котором есть текстовое поле для описания, добавленное пользователем о себе. Хотя у меня есть отдельная страница, где пользователь может редактировать профиль, но я хочу предоставить функцию, которая, когда пользователь наводится на его поле описания, затем видит кнопку edit.

Если пользователь нажимает на эту кнопку, он сам может редактировать поле описания, а бэкэнд будет обновлен с использованием Ajax. Вызов ajax и обработка бэкэнда просты, но как я могу заменить html на кнопку textarea и submit и снова вернуть оригинальный html с помощью javascript.

Вот что мой HTML выглядеть

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

Когда кто-то нажмет editButton Я хочу, чтобы заменить HTML внутри personalText с textarea, содержащий исходный текст в descText, и update кнопку. И когда пользователь редактирует текст и нажимает обновление, я обновляю бэкэнд-модель и снова добавляю тег <a> и тег <p>.

Может кто-нибудь помочь. Кажется, я знаю, как делать его части, но не могу понять, как я буду заменять исходную структуру на update.

Answer 1

Вместо создания/разрушающих элементов 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.

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

Example on jsfiddle

Answer 2

$('#editButton').click(function(){ 
    var text = $('descText').text(); 
    var textArea = $('<textarea></textarea>'); 
    textArea.value = text; 
    $('#personalText').replaceWith(textArea); 
});