CODEWITHSUNDEEP
javascriptjquerydom
Teson
Teson

Reputation: 6736

How can I move a DOM section including current form field values?

Copying $('#id').html() doesn't transfer new textbox values.

How can I make sure these are copied / moved to another DOM-position?

Upvotes: 0

Views: 159

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074238

Don't make a round-trip through markup, just use $() to select the elements and appendTo to append them elsewhere (which will move, not copy, them):

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

Live Example:

$(".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>

Note that if the second selector matches more than one target, then for the second, third, etc. copy, clones will be made; but the originals will be in the first/only target.

Or of course, use $() to select the destination, $() to select the elements, and append to move them:

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

Live Example:

$(".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>

Upvotes: 3

Related Questions