how to change placement of input and its value with jquery

January 30, 2023

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 class="element1">
    <input type="text" placeholder="enter something then clone it!"/>
</div>
<div class="element2"></div>
<button id="myButton">click to clone</button>

>Solution :

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 class="element1">
    <input type="text" placeholder="enter something then clone it!"/>
</div>

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