Clone div and change values

Question

When pressing a button I want to make a new copy of the <div class="search-result"> and change the h3 inside it.

I tried to clone it but that would only clone the already consisting one and I don't know how to change the value of h3 in the new cloned one. as in $(".search-result").clone().appendTo(".search"); How do I change the value of the one I just cloned, since I have a loop to make more of these?

Is there another method to do this?

<div class="col-xs-12 col-md-6 search" style="background-color: blue;">
                        <h2>Sök resultat</h2>
                        <div class="search-result">
                            <h3>Titel(year)</h3>
                            <input id="btnFavorite" type="submit" value="Favoritfilm" class="btn btn-warning">
                            <input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning">
                        </div>

                    </div>

Answer 1

Try something like this. In this example you first need to clone the node using cloneNode then append it to the parent div. Find the h3 tag inside the cloned div using find() and use html() to manipulate the inner html of h3 tag.

            can = document.getElementById(".search_result")
            clone = can.cloneNode(".search_result");
            document.getElementById(".search").appendChild(clone);
            clone.find('h3').html( 'put new value here' );