How to modify the li items with JavaScript?

Question

I'm sorry, I speak a little English.

My HTML:

<div class="widgetcontent">
    <ul>
        <li class="cat-item cat-item-526">
            <a href="a-test">A test</a>
        </li>
        <li class="cat-item cat-item-527">
            <a href="b-test">B test</a>
            <ul class='children'>
                <li class="cat-item cat-item-528">
                    <a href="test-b1">Test B1</a>
                </li>
                <li class="cat-item cat-item-529">
                    <a href="test-b2">Test B2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

I would like:

If there is ul.children, modify with JavaScript and add the div.dropdown:

<li class="cat-item cat-item-527">
    <a href="b-test">B test</a>
    <div class="dropdown" onclick="myFunction('cat-item-527')">▾</div><!-- ADD -->
    <ul class='children'>
        <li class="cat-item cat-item-528">
            <a href="test-b1">Test B1</a>
        </li>
        <li class="cat-item cat-item-529">
            <a href="test-b2">Test B2</a>
        </li>
    </ul>
</li>

How to? Without jQuery or another JS framework. Native JS please.

Thank you very much.

Need onclick the added div. – luckyluck31 Aug 16 '21 at 12:43 — luckyluck31, Aug 16 '21 at 12:43

Jamiec · Answer 1 · 2021-08-17T07:03:34.840

1

You can do this by finding all li elements and then determining if there is a ul inside it. If so just add an element using insertBefore

In this example I have coloured the element red just to indicate its added in the correct place.

[...document.querySelectorAll("ul li.cat-item")].forEach(li => {
   const ul = li.querySelector("ul.children");
   if(ul){
     const div = document.createElement("div");
     div.classList.add("dropdown");     
     div.addEventListener("click",() => console.log("Clicked new div", li.className))
     li.insertBefore(div,ul)
   }
});

.dropdown{
  height:10px;
  background-color:red
}

<div class="widgetcontent">
    <ul>
        <li class="cat-item cat-item-526">
            <a href="a-test">A test</a>
        </li>
        <li class="cat-item cat-item-527">
            <a href="b-test">B test</a>
            <ul class='children'>
                <li class="cat-item cat-item-528">
                    <a href="test-b1">Test B1</a>
                </li>
                <li class="cat-item cat-item-529">
                    <a href="test-b2">Test B2</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

edited Aug 17 '21 at 07:03

answered Aug 16 '21 at 12:46

Jamiec

133,658
13
134
193

Dear Jamiec, where do I paste JavaScript? In or ? I'm sorry, but not working. The begin – luckyluck31 Aug 16 '21 at 13:09
@luckyluck31 it depends when you want this code to run. In response to a click? or when the page loads? or....? – Jamiec Aug 16 '21 at 13:13
I would like page load. How to and why not works for me? Please example how to for page load. – luckyluck31 Aug 16 '21 at 15:10
[...document.querySelectorAll - is it okay? – luckyluck31 Aug 16 '21 at 15:10
@luckyluck31 see: https://stackoverflow.com/questions/807878/how-to-make-javascript-execute-after-page-load?rq=1 – Jamiec Aug 16 '21 at 15:12
I would like: – luckyluck31 Aug 16 '21 at 15:22
@Jamiec How to write a console log cat-item-527? Not working: console.log("Clicked new div"+li.classname) – jozs2021 Aug 16 '21 at 16:43
@jozs2021 javascript is case sensitive so it is `li.className` – Jamiec Aug 17 '21 at 07:04

How to modify the li items with JavaScript?

1 Answers1