Una vez que presiono el signo "+" y el elemento se mueve al div "destino", ¿cuál sería la forma más fácil con la ayuda del almacenamiento local para mantener un "elemento" en el div "destino" después de que se actualice la página?
function appendIt() { var element = document.getElementById("element"); document.getElementById("destination").appendChild(element); } #destination { background-color:red; } #source { background-color:beige; } <div id="destination"></div> <div id="source"> <a id="element"href="#" onclick="appendIt()">One</a></div>Una forma es mantener el innerHtml de ese div en LocalStorage y en la actualización de la página verificar si existe algo allí y si existe agregarlo en el div.
Como mencionó con localStorage , puede agregar alguna bandera en el almacenamiento local dentro de la función appendIt() . Y en el evento de carga de Windows, puede verificar si ese piso está allí en el almacenamiento local y qué valor tiene. Según ese valor, puede volver a llamar a appendIt() según el requisito.
function appendIt() { // set value to local storage with key append localStorage.setItem("append", "true"); var element = document.getElementById("element"); document.getElementById("destination").appendChild(element); } // Add windows load event to check local storage window.onload = (event) => { // check local storage for key append and if its value is true then call appendIt function if (localStorage.getItem("append") == "true") { appendIt(); } }; #destination { background-color: red; } #source { background-color: beige; } <div id="destination"></div> <div id="source"> <a id="element" href="#" onclick="appendIt()">One</a></div>Desea crear un clon profundo antes de agregar el elemento. Esto se logra llamando a cloneNode(true) en el elemento:
document.getElementById("destination").appendChild(element.cloneNode(true));