append / appendChild不适用于所有项目

Question

I'm trying to move all the list items from an list to another using only javascript but for some reason only half of them are actually moved.

Heres a working example of what I'm doing:

 var results_ul = document.getElementById('results'); var stores_li = document.getElementsByClassName('store-list-item'); for (var x = 0; x < stores_li.length; x++) { document.getElementById('hide').appendChild(stores_li[x]); stores_li[x].className += ' teste'; } 

 <p>results</p> <ul id="results"> <li class="store-list-item">Teste 1</li> <li class="store-list-item">Teste 2</li> <li class="store-list-item">Teste 3</li> <li class="store-list-item">Teste 4</li> </ul> <p>Hide:</p> <ul id="hide"></ul> 

What seems to be the problem?

Answer 1

getElementsByClassName returns a live list.

When you append the element to a different element, you change its position in the list.

So it starts off as:

1 2 3 4

Then you move the first one:

2 3 4 1

Then you access the second one … but the second one is now 3 because everything has shuffled down the list.

---

You could copy each element into an array (which will not be a live list) and then iterate over that array to move them (so they won't change positions as you go).

Alternatively, you could use querySelectorAll which returns a non-live list.

Answer 2

You should better use querySelectorAll than getElementsByClassName

 var results_ul = document.getElementById('results'); var stores_li = document.querySelectorAll('.store-list-item'); stores_li.forEach((item)=>{ document.getElementById('hide').appendChild(item); item.className += ' teste'; }); 

 <p>results</p> <ul id="results"> <li class="store-list-item">Teste 1</li> <li class="store-list-item">Teste 2</li> <li class="store-list-item">Teste 3</li> <li class="store-list-item">Teste 4</li> </ul> <p>Hide:</p> <ul id="hide"></ul> 

Answer 3

Try use querySelectorAll . It'll returns a non-live list. That's what you need.

var stores_li = document.querySelectorAll('.store-list-item');

To increase more information:

Live : when the changes in the DOM are reflected in the collection. The content suffers the change when a node is modified.

Non-Live : when any change in the DOM does not affect the content of the collection.

document.getElementsByClassName() is an HTMLCollection, and is live.

document.querySelectorAll() is a NodeList and is not live.

Answer 4

In your code you are removing each element from the first list and inserting into the new list. After you remove 2 elements it will have only 2 elements in the first list but now you are searching the 3 rd index in the loop which is not there. So to make it work i have prepended each element from the last.

 var results_ul = document.getElementById('results'); var stores_li = document.getElementsByClassName('store-list-item'); var hide_ul = document.getElementById('hide'); for (var x = 0, y = stores_li.length; x < y; x++) { hide_ul.insertBefore(stores_li[yx-1],hide_ul.firstChild); stores_li[x].className += ' teste'; } 

 <p>results</p> <ul id="results"> <li class="store-list-item">Teste 1</li> <li class="store-list-item">Teste 2</li> <li class="store-list-item">Teste 3</li> <li class="store-list-item">Teste 4</li> </ul> <p>Hide:</p> <ul id="hide"></ul> 

Answer 5

Or you may want to clone the element with Jquery and you can push into the clonned ones then delete the orginals from top. I could not find any equivalent of clone() for js but if you want to check link is here

Answer 6

var results_ul = document.getElementById('results');
var stores_li = document.getElementsByClassName('store-list-item');

while(stores_li.length>0) {
   document.getElementById('hide').appendChild(stores_li[0]);
   stores_li[x].className += ' teste';
}