Move stuff ...advanced, library function

Example 1

Here's some buttons.

Here's two lists.

  • List one, item number one
  • List one, item number two
  • List one, item number three
  • List one, item number four
  • List one, item number five
  • List two, item number one
  • List two, item number two
  • List two, item number three
  • List two, item number four
  • List two, item number five

Example 2

Here's some buttons.

Here's two lists.

  • List one, item number one
  • List one, item number two
  • List one, item number three
  • List one, item number four
  • List one, item number five
  • List two, item number one
  • List two, item number two
  • List two, item number three (with a sublist)
    • List two, item number four
    • List two, item number five

    navigate my process

    previous • next

    related content

    The Explanation

    That, naturally, turns into a library function like our moveElement() function—and in fact we can just expand our moveElement() function a bit, because, at the end of the day, .insertAdjacentElement('beforeend') functions the same as .appendChild(). I've updated the library function in this example accordingly, adding a position parameter with a default setting of beforeend. There's a couple functional examples here.