How to transfer list A to list B by clicking on BtnB? With my code, I manage to transfer the content by clicking the BTNB, but when I click again on the BTNA, the numbers no longer appear in list A as expected but in list 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>You're transfering the entire listA element to listB, not just its contents.
You should loop over the children of listA and transfer each of them.
I convert source.childNodes to an array for the iteration because moving the nodes removes them from the childNodes list, which would make the iteration skip nodes.
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>