Can I clone, edit and append a div?

I'm trying to find out if its possible to clone a HTML div with JS, edit it and append it again as a new element. So my source is for example this code here:

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
</div>

After copying this element, I need to find a way to change the attribute id of the input, clear the input value and paste it again in the wrapper so that it looks like this at the end:

<div class="wrapper">
    <div class="element">
        <input id="test--1" value="ABC"/>
    </div>
    <div class="element">
        <input id="test--2" value=""/>
    </div>
</div>

Does that make sense to you? If yes, how can I get this done? Or is it better to assign the content to a variable to append it? I'm looking for the best way here and maybe my idea is a solution too.