¿Cómo transferir la lista A a la lista B haciendo clic en BtnB? Con mi código logro transferir el contenido haciendo clic en el BTNB, pero cuando vuelvo a hacer clic en el BTNA, los números ya no aparecen en la lista A como se esperaba sino en la lista B
document.getElementById("buttonTryA").onclick = takeNumberA; function takeNumberA() { var x = document.getElementById("myNumber").value; document.getElementById("listA").appendChild(document.createTextNode(`${x} `)); } document.getElementById("buttonTryB").onclick = appendIt; function appendIt() { var source = document.getElementById("listA"); document.getElementById("listB").appendChild(source); } section { display: flex; flex-wrap: wrap; } .titleA { margin-left: 50px; margin-right: 180px; } #listNumber { width: 200px; height: 300px; border: thin solid #ccc; } <body> Number: <input type="number" id="myNumber" min="1" max="9"> <p>Click the BtnA to display the number of the number field (list A).</p> <section> <h1 class="titleA"> List A </h1> <h1> List B </h1> </section> <section> <button id="buttonTryA">BTNA</button> <div id="listNumber"> <p id="listA"></p> </div> <button id="buttonTryB">BTNB</button> <div id="listNumber"> <p id="listB"></p> </div> </section> </body>Estás transfiriendo todo el elemento listB listA no solo su contenido.
Debe recorrer los elementos secundarios de listA y transferir cada uno de ellos.
Convierto source.childNodes en una matriz para la iteración porque mover los nodos los elimina de la lista de childNodes , lo que haría que la iteración se salte los nodos.
document.getElementById("buttonTryA").onclick = takeNumberA; function takeNumberA() { var x = document.getElementById("myNumber").value; document.getElementById("listA").appendChild(document.createTextNode(`${x} `)); } document.getElementById("buttonTryB").onclick = appendIt; function appendIt() { var source = document.getElementById("listA"); Array.from(source.childNodes).forEach(child => document.getElementById("listB").appendChild(child)); } section { display: flex; flex-wrap: wrap; } .titleA { margin-left: 50px; margin-right: 180px; } #listNumber { width: 200px; height: 300px; border: thin solid #ccc; } <body> Number: <input type="number" id="myNumber" min="1" max="9"> <p>Click the BtnA to display the number of the number field (list A).</p> <section> <h1 class="titleA"> List A </h1> <h1> List B </h1> </section> <section> <button id="buttonTryA">BTNA</button> <div id="listNumber"> <p id="listA"></p> </div> <button id="buttonTryB">BTNB</button> <div id="listNumber"> <p id="listB"></p> </div> </section> </body>