Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to append li element, to another list

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.

Tags:

2

Answers


  1. 0

    It seems like you’re on the right track with your attempt. However, there are a couple of issues in your code that need to be addressed.
    Let’s correct them:

    1.Your query selector .list should be .menu > li, because you’re targeting

  2. elements directly under the .menu .

    3. 2.In your if condition, you’re checking nextSibling.classList.contains(‘list-‘). Instead, you should check for empty-list class.

    Here’s the corrected version of your JavaScript code:

    enter code here
document.addEventListener('DOMContentLoaded', function () {
var listItems = document.querySelectorAll('.menu > li');

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

    if (nextSibling && nextSibling.classList.contains('empty-list')) {
        listItem.appendChild(nextSibling);
    }
});

    });

    This code will move any empty list (identified by the presence of the class empty-list) inside the previous list item. Make sure that your HTML structure is correct and matches your JavaScript logic.

Login or Signup to reply.
  • 0

    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>
    Login or Signup to reply.
    • Please signup or login to give your own answer.

    Back To Top
    Search