javascript - 在 div 之间移动输入

Question

尝试通过移动按钮来回将用户输入从一个 div 移动到另一个 div。即使有多个输入，也可以将选定的输入从一个输入移动到另一个。 到目前为止，它将“field1”中的所有输入移动到“field2”。我试图只来回移动一条线。

尝试了各种东西，仍在学习这个。为了实现这一目标，我需要注意什么？` 任何帮助表示赞赏。

var number = [];

function myNotes() {
  var x = document.getElementById("field1");
  number.push(document.getElementById("input").value);
  x.innerHTML = number.join('<input type="button" value="move" onclick="move();"/><br/>');
}

function move() {
  $('#field1').appendTo('#field2')
}

form {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input id="input" type=text>
</form>
<input type=submit onclick="myNotes();" value="Send">

<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1"></div>
<h2>Field 2</h2>
<div id="field2"></div>

JSFIDDLE

Answer 1

您混合使用了 javascript 和 jQuery，这有点难以理解。我已经使用 jQuery 编写了一个这样的示例，因为您似乎已经在您的元素中使用了它:

https://jsfiddle.net/j5mvq6L5/7/

HTML:

<form>
  <input id="input" type=text>
</form>
<input type=submit id="btnSend" value="Send">

<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1" class="field"></div>
<h2>Field 2</h2>
<div id="field2" class="field"></div>

JS:

//listen for document ready
$(document).ready(function() { 
    //button click listener:
    $("#btnSend").on("click", function(e) {

        var $field1 = $("#field1");  //works like getElementById

        //create a containing div for later
        var $entry = $("<div></div>").addClass("entry");

        //create a new button
        var $btnMove = $("<input/>").attr("type", "button").attr("value", "move").addClass("btnMove");

        //click listener for the new button
        $btnMove.click(function(){              
          //find "sibling" field (I added a class to both), append this button's parent div
          $(this).parents(".field").siblings(".field").append($(this).parent());
        });

        //append entry parts
        $entry.append($("#input").val())
              .append($btnMove);

        //append entry to #field1
        $field1.append($entry);          
    });
 });

CSS:

form {
  display: inline;
}

.btnMove {
  margin-left: .5em;
}