How can i change the li items to div? javascript

Question

I have a ul class for a menu that joomla creates in my site but i dont want the li items inside, i want to transform them to div

<ul class="uk-nav uk-nav-default uk-nav-parent-icon uk-nav-accordion" uk-nav="">

<li><a href="/aviso-legal">Aviso legal</a></li>
<li><a href="/politica-de-privacidad">Política de privacidad</a></li>
<li><a href="/politica-de-cookies">Política de cookies</a></li></ul>

I try this:

content.find(".uk-nav li>div").unwrap().wrap("<div>");

What i want at the end is:

<ul class="uk-nav uk-nav-default uk-nav-parent-icon uk-nav-accordion" uk-nav="">

<div><a href="/aviso-legal">Aviso legal</a></div>
<div><a href="/politica-de-privacidad">Política de privacidad</a></div>
<div><a href="/politica-de-cookies">Política de cookies</a></div></ul>

http://jsfiddle.net/vyfx1L8w/ Change also ul to div is ok, or ul to div and li to p

Answer 1

As mentioned in my comment, ensure you replace the UL also to ensure you still have valid HTML when you're done. Anyway, Since you're already using jQuery, you could do this;

 let content = $(".uk-nav").html(); content = content.replace(/<li>/g, "<div>"); content = content.replace(/<\\/li>/g,"<div>"); $(".uk-nav").html(content); 

If you'd rather do this with vanilla javascript, this is also an option;

 let content = document.querySelector('.uk-nav').innerHTML; content = content.replace(/<li>/g, "<div>"); content = content.replace(/<\\/li>/g,"<div>"); document.querySelector('.uk-nav').innerHTML = content; 

To change the UL in to a div, do the same thing but target the UL's parent.