how to change placement of input and its value with jquery-CodePudding

I'm using .html() to get inputs inside a div and place it in another element using .html() again the problem is I cant get it with its value.

$("#myButton").click(function(){
    $(".element2").html($(".element1").html());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js</script>

<div >
    <input type="text" placeholder="enter something then clone it!"/>
</div>
<div ></div>
<button id="myButton">click to clone</button>

CodePudding user response：

To copy one element to another, you can use .clone()

var copy = $(".element1 > *").clone()

this will clone all of the elements with .element1 - you can then .append()/.appendTo() these to element2.

Updated snippet:

$("#myButton").click(function(){
    $(".element1 > *").clone().appendTo(".element2");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
    <input type="text" placeholder="enter something then clone it!"/>
</div>

<div ></div>
<button id="myButton">click to clone</button>