Relocate elements in the DOM

Question

Relocate elements in the DOM

Navigation

#1 by (2 votes)

2

How do I remove an element from its position and reallocate it in the DOM?

For example: in a <ul> , bring the last <li> to the top / first position.

I saw this in jQuery, with the function appendTo() , and would like to know how to do the same with pure javascript.

javascript

asked by anonymous 22.04.2017 / 02:45

1 answer

Debug Proc in database sql server 2014 How to call another action and return the value?

score 2 · Accepted Answer

You can use .insertBefore() syntax is:

elementoPai.insertBefore(novoElemento, elmentoReferência);

Example:

var ul = document.querySelector('ul');
var primeiro = document.querySelector('ul li:first-of-type');
var ultimo = document.querySelector('ul li:last-of-type');
ul.insertBefore(ultimo, primeiro);

<ul>
  <li>Primeiro ?</li>
  <li>Meio</li>
  <li>Ultimo ?</li>
</ul>

or more compactly:

var ultimo = document.querySelector('ul li:last-of-type');
ultimo.parentNode.insertBefore(ultimo, ultimo.parentNode.firstChild);