How to append li element, to another list

Question

I have a list that i want to append another list on certain conditions.

The structure looks like this:

<ul class="menu">
<li class="list-1"><ul class="ul-1"></ul></li>
<li class="list-2"><ul class="ul-2"></ul></li>
<li class="list-3"><ul class="ul-3"></ul></li>
<li class="list-4 empty-list"></li>
<li class="list-5"><ul class="ul-5"></ul></li>
</ul>

I want the list-4 empty-list, to be inside the list before it. So in this case,inside list-3, if the list is empty. I have made a check to check if lists are empty, thats why the list-4 has a class callled empty-list.

Can it be done with javascript? I have had trouble researching to a solution, also because i an not 100% sure how to describe it.

Thanks

I tried something like this:

document.addEventListener('DOMContentLoaded', function () {
    var listItems = document.querySelectorAll('.list');

    listItems.forEach(function (listItem, index) {
      var nextSibling = listItem.nextElementSibling;

      if (nextSibling && nextSibling.classList.contains('list-')) {
        var emptyList = listItem.querySelector('.empty-list');

        if (emptyList) {
          nextSibling.appendChild(emptyList);
        }
      }
    });
  });

I am still new to this sort of coding, so tried my best.

Answer 1

To do what you describe, you can:

1. Find the .empty-list li element. document.querySelector can do that for you.
2. Get the li in front of it, and then find the first ul inside it. previousElementSibling is good for getting the previous li (since there can't be anything else in a ul), and the element-specific version of querySelector is useful for finding the first ul within it.
3. See if that's empty via .children.length === 0.
4. If so, move the .empty-list element into it via appendChild as you have in your question (or append).

Here's an example:

// Find the `.empty-list` element
const emptyListItem = document.querySelector(".empty-list");
// Get the `li` previous to it, and find the (first) `ul` within that `li`
const previousList = emptyListItem
    .previousElementSibling
    .querySelector("ul");
// If that `ul` has no element children, move the empty `li` into it
if (previousList.children.length === 0) {
    previousList.appendChild(emptyListItem);
}

// (Just to show the resulting structure)
console.log(document.querySelector(".menu").outerHTML);

<ul class="menu">
<li class="list-1"><ul class="ul-1"></ul></li>
<li class="list-2"><ul class="ul-2"></ul></li>
<li class="list-3"><ul class="ul-3"></ul></li>
<li class="list-4 empty-list"></li>
<li class="list-5"><ul class="ul-5"></ul></li>
</ul>

Answer 2

You can also check this code. First check which li has no children with listItem.childNodes.length===0 get its class (using className) and select it (using getElementsByClassName) then get the previous element with same approach. In this case I first check if your 'orphan' li is not the first element in case your li order changes with (index!=0). In case order changes and orphan 'li' is the first element you will

document.addEventListener('DOMContentLoaded', function () {
    var listItems = document.querySelectorAll('li');
    const menu = document.querySelector('.menu')
    listItems.forEach(function (listItem, index) {
      if (listItem.childNodes.length===0) {
            let className = listItem.className
            let elemToInsert = Array.from(document.getElementsByClassName(className))
            elemToInsert[0].remove()
            if(index!=0){
                let PrevElem = listItems[index-1].children
                className = PrevElem[0].className
                let elemToInsertIn = Array.from(document.getElementsByClassName(className))
                elemToInsertIn[0].appendChild(elemToInsert[0])
            }
            else if(index ===0){
                // let PrevElem = listItems[selectedIndex].children // you need to set selectedIndex
                // className = PrevElem[0].className
                // let elemToInsertIn = Array.from(document.getElementsByClassName(className))
                // elemToInsertIn[0].appendChild(elemToInsert[0])
            }
      }
    });
    console.log(menu)
  });

<ul class="menu">
        <li class="list-1">
            <ul class="ul-1"></ul>
        </li>
        <li class="list-2">
            <ul class="ul-2"></ul>
        </li>
        <li class="list-3">
            <ul class="ul-3"></ul>
        </li>
        <li class="list-4 empty-list"></li>
        <li class="list-5">
            <ul class="ul-5"></ul>
        </li>
    </ul>

have to select the index of the element to insert in