1

estou querendo adicionar uma LI entre duas LI de uma UL. Eu não tenho acesso ao codigo CSS/HTML do template do site, se não criaria facilmente, então to pensando em adicionar via html e javascript.

Já tentei de tudo e não consegui, alguem teria uma ideia de como poderia realizar isso?

queria inserir essa 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>

Segue o codigo...

<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>

1 Resposta 1

1

JavaScript não têm um método para inserir "depois de", mas tem "antes de". Então o código que faria o que precisas é

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

Exemplo:

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>

3
  • coloquei aqui, mas não funcionou. Mas obrigado por responder, sigo tentando alternativas. Vou ver se copio o codigo dessse elemento, dar um display none neste e criar uma nova div com o mesmo codigo já com a LI da maneira que desejo. Commented 7/10/2019 às 16:46
  • @WilliamApocalypse cria um jsFiddle com o código que tens sem funcionar que posso dar uma olhada e corrigir.
    – Sergio
    Commented 7/10/2019 às 16:56
  • Obg amigo pela ajuda, coloquei aqui jsfiddle.net/#&togetherjs=OGEnEbclbu Na verdade, eu queria colocar a LOGO deste site, na BARRA inicial entre o botão e o icone de carrinho, iria eliminar o icone home e icone de mensagens. Para ficar o botão, logo e icone do carrinho, e eliminar essa logo abaixo da barra que ta muito fora dos padroes do e-commerce. Mas não encontrei como fazer isso pq nao tenho acesso ao codigo do tema/template, posso adicionar css, html e javascript. mas não to conseguindo pensar em um jeito. eu comentei da LI, pq vi que esses elementos na barra estao dentro de uma LI Commented 7/10/2019 às 18:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .