JavaScript - Move entire UL > LI list as fragment into a DIV

Question

With the Move_ULLI function, how is it possible to move the entire List (UL+LI) into the DIV with the destination class?

I'm not intending to use IDs to identify DIVs or UL List, just by ClassName() and TagName().

HTML:

<div class="container">

  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>

  <div class="destination"></div>

  <input type="button" onclick="Move_ULLI" value="MOVE ULLI" />

</div>

JavaScript:

<script>

  function Move_ULLI() {
    var fragment = document.createDocumentFragment();
    fragment.appendChild(document.querySelectorAll("ul"));
    document.getElementsByClassName('destination').appendChild(fragment);
  }
  
</script>

Intended Result:

<div class="container">

  <div class="destination">
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>

  <input type="button" onclick="Move_ULLI" value="MOVE ULLI" />

</div>

Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Robin Zigmond, Aug 01 '22 at 21:08

score 2 · Accepted Answer · answered Aug 01 '22 at 20:59

A few issues:

You never call the function. The onclick attribute lacks the parentheses after the function to actually invoke it.
getElementsByClassName returns a node list and has no appendChild method. Use querySelector instead (with the right selector)
querySelectorAll returns a node list, while you want to just get a node, so use querySelector there as well
There is no need to create a fragment. Just append the ul node and it will move.

function Move_ULLI() {
  document.querySelector('.destination')
          .appendChild(document.querySelector("ul"));
}

.destination { background-color: yellow }

<div class="container">

  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>

  <div class="destination"></div>

  <input type="button" onclick="Move_ULLI()" value="MOVE ULLI" />

</div>

Ryan Wilson · Answer 2 · 2022-08-01T21:06:32.803

There are multiple things wrong with your example:

You need to add the parenthesis to the end of your function name in your inline onclick markup for your Html (I would suggest moving to using event listeners, but for the sake of giving you a working example I am leaving it).
If you use querySelectorAll or getElementsByClassName you get back a node list, so you either have to index the node list or use querySelector and/or getElememtById

Here's a working solution:

function Move_ULLI() {
    var fragment = document.createDocumentFragment();
    fragment.appendChild(document.querySelector("ul"));
    document.getElementsByClassName('destination')[0].appendChild(fragment);
}

.destination {
   background-color:green;
}

<div class="container">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <div class="destination"></div>
  <button type="button" onclick="Move_ULLI();">
  MOVE ULLI
  </button>
</div>

Solution using event handler

function Move_ULLI() {
    var fragment = document.createDocumentFragment();
    fragment.appendChild(document.querySelector("ul"));
    document.getElementsByClassName('destination')[0].appendChild(fragment);
}

window.addEventListener("DOMContentLoaded", () => {
    document.querySelector("button").addEventListener("click", Move_ULLI);
});

.destination {
    background-color:green;
}

<div class="container">
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
      <div class="destination"></div>
      <button type="button" onclick="Move_ULLI();">
      MOVE ULLI
      </button>
    </div>

JavaScript - Move entire UL > LI list as fragment into a DIV

2 Answers2