How to add a LI to a UL via Javascript?

Asked

Viewed 308 times

1

I’m looking to add a LI between two LI’s of a UL. I don’t have access to the CSS/HTML code of the website template, if it would not create easily, so I’m thinking about adding via html and javascript.

I’ve tried everything and I couldn’t, someone would have an idea of how to accomplish this?

wanted to insert this LI

<li>
    <a href="https://www.xyz.com.br/" title="XYZ">
        <img src="https://xyz.com.br/xyz.png" alt="xyz" width="200px">
    </a>
</li>

Follow the code...

<div class="atalhos-mobile visible-phone fundo-secundario borda-principal" style="background-color: rgb(255, 0, 128); border-bottom: 1px solid rgba(44, 43, 43, 0.18);">

<ul>

    <li class="menu-mobile-botao">
        <button type="button" class="navbar-toggle" data-toggle="slide-collapse" data-target="#slide-collapse" aria-expanded="false">
            <svg class="icone-menu" style="fill: rgb(255, 213, 65);">
                <use xlink:href="#icone-menu"></use>
            </svg>
        </button>
    </li>

    **//////////// QUERIA COLOCAR A LI AQUI ////////////////////////////**

    <li class="home-mobile">
        <a href="https://www.xyz.com.br/" class="">
            <svg class="icone-home" style="fill: rgb(255, 255, 255);">
                <use xlink:href="#icone-home"></use>
            </svg>
        </a>
    </li>

</ul>
</div>

javascript html jquery css

1 answer

1

Javascript does not have a method to insert "after", but has "before". So the code that would do what you need is 

elementoAnterior.parentNode.insertBefore(novoElemento, elementoAnterior.nextSibling);

Example:

const menuMobile = document.querySelector('.menu-mobile-botao');
const li = document.createElement('li');
li.innerHTML = '<span>Aqui estou eu!</span>';
menuMobile.parentNode.insertBefore(li, menuMobile.nextSibling);
<div class="atalhos-mobile visible-phone fundo-secundario borda-principal" style="background-color: rgb(255, 0, 128); border-bottom: 1px solid rgba(44, 43, 43, 0.18);">

  <ul>

    <li class="menu-mobile-botao"><button type="button" class="navbar-toggle" data-toggle="slide-collapse" data-target="#slide-collapse" aria-expanded="false"><svg class="icone-menu" style="fill: rgb(255, 213, 65);"><use xlink:href="#icone-menu"></use></svg></button></li>

    <li class="home-mobile">
      <a href="https://www.xyz.com.br/" class=""> <svg class="icone-home" style="fill: rgb(255, 255, 255);"><use xlink:href="#icone-home"></use></svg></a>
    </li>

  </ul>
</div>

  • I put it here, but it didn’t work. But thanks for answering, I keep trying alternatives. I’ll see if I can copy the element code, give an None display on this one and create a new div with the same code already with the LI the way I wish.

  • @Williamapocalypse creates a jsFiddle with the code you have without working that I can take a look and fix.

  • Obg friend for help, I put here jsfiddle.net/#&togetherjs=Ogenebclbu In fact, I wanted to put the LOGO of this site, in the initial BAR between the button and the cart icon, would eliminate the home icone and messages icone. To get the button, logo and icon of the cart, and delete this right below the bar that is very outside the standards of e-commerce. But I couldn’t find how to do this because I don’t have access to theme/template code, I can add css, html and javascript. but I can’t think of a way. I commented from LI, because I saw that these elements in the bar are inside a LI

Browser other questions tagged javascript html jquery css

You are not signed in. Login or sign up in order to post.