如何移动包含当前表单字段值的 DOM 部分？

Question

复制$('#id').html() 不会传输新的文本框值。

我如何确保这些被复制/移动到另一个 DOM 位置？

Answer 1

不要通过标记进行往返，只需使用$() 选择元素并使用appendTo 将它们附加到其他位置（这将移动而不是复制它们）：

$("selector-for-the-elements").appendTo("selector-for-the-destination");

现场示例：

$(".move").val("move me");
setTimeout(function() {
  $(".move").appendTo(".into");
}, 800);

.into {
  border: 1px solid #ddd;
}

<input type="text" class="move">
<div class="into">Into me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

注意，如果第二个选择器匹配多个目标，那么对于第二个、第三个等副本，将进行克隆；但原件将在第一个/唯一的目标中。

当然，也可以使用$() 选择目标，$() 选择元素，append 移动它们：

$("selector-for-the-destination").append($("selector-for-the-elements"));

现场示例：

$(".move").val("move me");
setTimeout(function() {
  $(".into").append($(".move"));
}, 800);

.into {
  border: 1px solid #ddd;
}

<input type="text" class="move">
<div class="into">Into me</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>