不应该保留文本区域数据吗？

Question

我在表单中有一个textarea：

<form action="#" id="container">
  <textarea id="txt" cols="100" rows="5">Good bye</textarea>
</form>

我想要的就是用div替换这个表单：

$("#container").replaceWith(function() {
    return "<div>" + $(this).html() + "</div>";
});

这有效没有任何问题，但是如果我在使用 replaceWith 方法之前更改 textarea 值：

$("#txt").val("hello world");

最终内容是 div 内的 textarea ，其中包含“再见”文本，而不是预期的“你好世界”。您有一个演示。

为什么会发生这种情况？如何用保留文本区域内容的 div 替换 form？

Answer 1

.val() 正在更改文本区域的值（意味着提交表单时发送的数据），不一定是其内部文本/HTML.. 为此，请使用 .html() 相反：

$("#txt").html("hello world"); 

更新了 jsFiddle。

Answer 2

这有效：

$("#txt").val("hello world");
$("#container").replaceWith(function() {
    return $('<div />').append($(this).contents());
});

问题是用 .html() 序列化 html 时出现的.使用 DOM 节点工作要好得多。这也将保留事件处理程序。

---

这是另一种方法：

$('#container').wrapInner('<div/>').children().unwrap();

Answer 3

试试这个，（使用 .html() 代替）（html() 在文本区域内插入值，.val() 不会)

http://jsfiddle.net/kRGqR/5/