如何将 li 项目更改为 div？ javascript

Question

我有一个 ul 类，用于 joomla 在我的网站中创建的菜单，但我不想要里面的 li 项目，我想将它们转换为 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>

我试试这个：

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

最后我想要的是：

<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/ 也可以将 ul 更改为 div，或者将 ul 更改为 div 并将 li 更改为 p

Answer 1

正如我在评论中提到的，确保您替换 UL 以确保您在完成后仍然拥有有效的 HTML。无论如何，既然你已经在使用 jQuery，你可以这样做；

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

如果您更愿意使用 vanilla javascript 执行此操作，这也是一种选择；

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;

要将 UL 更改为 div，请执行相同操作，但以 UL 的父级为目标。