We Keep Coding

How to modify the li items with JavaScript?

I'm sorry, I speak a little English.
My HTML:
<div class="widgetcontent">
<ul>
<li class="cat-item cat-item-526">
A test
</li>
<li class="cat-item cat-item-527">
B test
<ul class='children'>
<li class="cat-item cat-item-528">
Test B1
</li>
<li class="cat-item cat-item-529">
Test B2
</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">
B test
<div class="dropdown" onclick="myFunction('cat-item-527')">▾</div><!-- ADD -->
<ul class='children'>
<li class="cat-item cat-item-528">
Test B1
</li>
<li class="cat-item cat-item-529">
Test B2
</li>
</ul>
</li>
How to? Without jQuery or another JS framework. Native JS please.
Thank you very much.

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 test
</li>
<li class="cat-item cat-item-527">
B test
<ul class='children'>
<li class="cat-item cat-item-528">
Test B1
</li>
<li class="cat-item cat-item-529">
Test B2
</li>
</ul>
</li>
</ul>
</div>

Show only children of current mouseover div :jQuery

I have categories that have children subcategories, the first time all subcategories children are invisible, I want when I pass the mouse over the category number the subcategory of this current category display and when I locate the mouse they return invisible
Html:
<ul class="product-categories">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby
<ul class="children" style="display: none">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
<li class="cat-item "><span class="icon-toggle"></span>Bodysuits</li>
</li>
</ul>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Boy
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span><a href=">Boy</a>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Shoes</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Nursery Furnishings
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs & Prams</li>
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs's accessories </li>
<li class="cat-item "><span class="icon-toggle"></span>Travel accessories</li>
</ul>
</li>
</ul>
jquery:
jQuery(".cat-parent").on("mouseover", function () {
jQuery( this " .children" ).css({'display': "block"});
});

Your selector in incorrect. You need to use $(".children", this) or .find() to do this work.
jQuery(".children", this).css({'display': "block"});
// Or
jQuery(this).find(".children").css({'display': "block"});
Also you can use mouseout event to hiding elements after mouse out.
jQuery(".cat-parent").on("mouseover", function () {
jQuery(".children", this).css({'display': "block"});
}).on("mouseout", function(){
jQuery(".children", this).css({'display': "none"});
});
jQuery(".cat-parent").on("mouseover", function () {
jQuery( " .children" , this).css({'display': "block"});
}).on("mouseout", function(){
jQuery( " .children" , this).css({'display': "none"});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="product-categories">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby
<ul class="children" style="display: none">
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
<li class="cat-item "><span class="icon-toggle"></span>Bodysuits</li>
</li>
</ul>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Baby Boy
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Accessories</li>
</ul>
</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span><a href=">Boy</a>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Girl
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Shoes</li>
</ul>
</li>
<li class="cat-item cat-parent">
<span class="icon-toggle"></span>Nursery Furnishings
<ul class="children" style="display: none">
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs & Prams</li>
<li class="cat-item "><span class="icon-toggle"></span>Pushchairs's accessories </li>
<li class="cat-item "><span class="icon-toggle"></span>Travel accessories</li>
</ul>
</li>
</ul>

I would suggest that you'd handle this with CSS only. There's no need to use JavaScript to handle what you want to do.
I will assume that you want to display the subcategories when the user moves the mouse over the .cat-parent element. The following style will do the job:
.cat-parent:hover ul.children {
display:block;
}
To break it down. This selector means that any ul element with the class of children, that is nested within an element with the class of .cat-parent, will get the above styling when the .cat-parent element is being hovered (hover is basically the same as mouseover.)
And as soon as you pull the mouse away from the element, the :hover sub selector disappears, and the display goes back to none.
So you wouldn't need the jQuery code. You only need to add the above style in your CSS file (or in a style tag on in the HTML file if you do not use any CSS file.)
A great bonus with handling this kind of design logic with pure CSS is that it works even on browsers that have JavaScript turned off.

Dropdown menu on click

I have tried numerous JS queries and none seem to be working.
I want to only show my dropdown menus when the list item they relate to is clicked, they need to show until the user either clicks off the ul or clicks a link.
Here is my html:
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#">
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
</a>
<a href="#">
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</a>
</ul>
</div>
</div>

Try this:
$("li:has(ul)").click(function(){
$("ul",this).toggle('slow');
});
Make sure you have the jQuery library.

In this solution dropdown menus collapse when a link is clicked as you asked.
$('a').click(function(){
$('.container ul:not(:first-child)').hide();
if($(this).next().is('ul')){
$(this).next().toggle('slow');
}
});
ul ul{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>

<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li>
<li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li>
</ul>
</div>
</div>
this should work

Load jQuery library alternatively you can use like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Apply style to your menu html as below
<style>
li > ul{display:none;}
.show {display:block;}
</style>
Now this is what you are looking for.
<script>
jQuery("li:has(ul)").click(function(){
jQuery("ul",this).toggleClass('show');
});
</script>
$("li:has(ul)").click(function(){
$("ul",this).toggleClass('show');
});
li > ul{display:none;}
.show {display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sub-nav">
<div class="container">
<ul>
<li class="active">All</li>
<li>Videos</li>
<li>Images</li>
<li>Maps</li>
<li>News</li>
<a href="#"><li id="has-sub">More
<ul>
<li>Shopping</li>
<li>Books</li>
<li>Flights</li>
<li>Apps</li>
</ul>
</li></a>
<a href="#"><li id="search-tools">Search Tools
<ul>
<li id="has-sub">Any Country</li>
<li id="has-sub">Any Time</li>
<li id="has-sub">All Results</li>
</ul>
</li></a>
</ul>
</div>
</div>
Use jQuery instead of $, because some frameworks or cms tools have conflict with it. So jQuery works always.

Combine Navigation UL jQuery Function

I am trying to write a function that will combine two children ul#level_2and append them to their parent li#level_1 within a dropdown #navigation.
I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.
$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();
Here is a shortened version of my current html structure & below is the desired result:
Simple Current HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2">
Link A
</li>
</ul>
<ul class="level_2">
<li class="level_2">
Link B
</li>
</ul>
</div>
</li>
</ul>
</div>
Desire HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<ul class="level_2">
<li class="level_2">
Link A
</li>
<li class="level_2">
Link B
</li>
</ul>
</li>
</ul>
</div>
Full Detailed HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1 furniture">
Furniture
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 sofa">
Sofa
</li>
</ul>
<ul class="level_2">
<li class="level_2 bed">
Bed
</li>
</ul>
</div>
</li>
<li class="level_1 bathroom">
Bathroom
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 shower">
<a href="#">Shower/a>
</li>
</ul>
<ul class="level_2">
<li class="level_2 bath">
Bath
</li>
</ul>
</div>
</li>
</ul>
</div>

This should do what you need.
var wrapper = $(".subnav_wrapper").contents();
$(".subnav_wrapper").replaceWith(wrapper );
$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();
JSFIDDLE DEMO

Wordpress : How can add span to menu

i have menuin wordpress like this :-
<div id="my_custom_class">
<ul class="my_custom_class">
<li class="page_item">page_item
<ul class='children'>
<li class="page_item child">children</li>
</ul>
</li>
<li class="current_page_item">current_page</li>
<li class="current_page_item">current_page</li>
<li class="current_page_item">current_page</li>
</ul>
</div>
this menu will be create wheni use this :-
<? wp_nav_menu('menu=header'); ?>
so i need when any li have child, add <span></span> tag befor tag like this
<div id="my_custom_class">
<ul class="my_custom_class">
<li class="page_item"><span></span>page_item
<ul class='sub-menu'>
<li class="page_item child">children</li>
</ul>
</li>
<li class="current_page_item">current_page</li>
<li class="current_page_item">current_page</li>
<li class="current_page_item">current_page</li>
</ul>
</div>
how can i do that. by jquery

Use .prepend()
$('ul.my_custom_class li a').closest('li').prepend('<span></span>');
Live DEMO
Live DEMO
$('ul.my_custom_class li:has(ul)').prepend('<span></span>');

By jQuery? Ok:
$('<span></span>').prependTo('ul.my_custom_class li:has(ul)');
See http://api.jquery.com/prependTo/

If you aren't willing to dig in to wordpress' functionality, you can inject the <span> elements with regex:
(<li.*class="[^\"]*page_item[^\"]*"[^>]*>)(<a.*</a>[^<]+<ul)
Result:
<div id="my_custom_class">
<ul class="my_custom_class">
<li class="page_item"><span></span>page_item
<ul class='children'>
<li class="page_item child">children</li>
</ul>
</li>
<li class="current_page_item">current_page</li>
<li class="current_page_item">current_page</li>
<li class="current_page_item">current_page</li>
</ul>
</div>
$1 = <li class="page_item">
$2 = page_item<ul
And so you just preg_replace with \1<span></span>\2 (you will need to add a backslash to the </a>)
Example on php fiddle (assuming I generated the link correctly lol)