Change a class that is inside an id with Javascript

Asked

Viewed 37 times

1

I need to change the word SUBSCRIBER that is in DIV id="nav_menu-5" within the H3 by services. 

<div class="col-sm-4">
  <div id="nav_menu-3" class="widget widget_nav_menu">
    <h3 class="widgettitle title m_title m_title_ext text-custom">Parceiros</h3>
    <div class="menu-rodape_parceiros-container">
      <ul id="menu-rodape_parceiros" class="menu">
        <li id="menu-item-162" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-162"><a href="https://redesfiepa.org.br/novo/parceiros/#eluid9bd491ff">Empresas Mantenedoras</a></li>
        <li id="menu-item-163" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-163"><a href="https://redesfiepa.org.br/novo/parceiros/#eluidcc9d7ccc">Empresas Apoiadoras</a></li>
        <li id="menu-item-164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-164"><a href="https://redesfiepa.org.br/novo/parceiros/#eluid903a0340">Empresas Cooperadoras</a></li>
      </ul>
    </div>
  </div>
  <div id="nav_menu-5" class="widget widget_nav_menu">
    <h3 class="widgettitle title m_title m_title_ext text-custom">Assinante</h3>
    <div class="menu-rodape_assinante-container">
      <ul id="menu-rodape_assinante" class="menu">
        <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168"><a href="#">Serviços às Indústrias</a></li>
        <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169"><a href="#">Serviços a Fornecedores</a></li>
      </ul>
    </div>
  </div>
</div>

let menu = document.getElementById("nav_menu-5");

menu.innerHTML="<h3 class='widgettitle title m_title m_title_ext text-custom'>SERVIÇOS</h3><div class="menu-rodape_assinante-container"><ul id="menu-rodape_assinante" class="menu"><li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168"><a href="#">Serviços às Indústrias</a></li> <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169"><a href="#">Serviços a Fornecedores</a></li> </ul></div>";

javascript html

  • what your debt? what you tried to do? show your code javascript

  • For easy reading, put the code in the question.

  • Do you use jQuery?

  • I hadn’t used it in this project but I can use it

2 answers

1

How you want to change the text content of the element h3, you can use a method of the object itself document to search for any HTML element within the selected div ("nav_menu-5"). As the text is in the first element h3 - Suppose there can be more than one - we use the index [0] to select it.

let menu = document.getElementById("nav_menu-5");
let h3 = menu.getElementsByTagName("h3")[0];

h3.innerHTML = "Serviços";
<div class="col-sm-4">
  <div id="nav_menu-3" class="widget widget_nav_menu">
    <h3 class="widgettitle title m_title m_title_ext text-custom">Parceiros</h3>
    <div class="menu-rodape_parceiros-container">
      <ul id="menu-rodape_parceiros" class="menu">
        <li id="menu-item-162" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-162"><a href="https://redesfiepa.org.br/novo/parceiros/#eluid9bd491ff">Empresas Mantenedoras</a></li>
        <li id="menu-item-163" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-163"><a href="https://redesfiepa.org.br/novo/parceiros/#eluidcc9d7ccc">Empresas Apoiadoras</a></li>
        <li id="menu-item-164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-164"><a href="https://redesfiepa.org.br/novo/parceiros/#eluid903a0340">Empresas Cooperadoras</a></li>
      </ul>
    </div>
  </div>
  <div id="nav_menu-5" class="widget widget_nav_menu">
    <h3 class="widgettitle title m_title m_title_ext text-custom">Assinante</h3>
    <div class="menu-rodape_assinante-container">
      <ul id="menu-rodape_assinante" class="menu">
        <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168"><a href="#">Serviços às Indústrias</a></li>
        <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169"><a href="#">Serviços a Fornecedores</a></li>
      </ul>
    </div>
  </div>
</div>

1


There are many ways to do this. In addition to the shape shown by Victor Carnival, you can also use the querySelector(), which accepts CSS selectors and is much simpler and more flexible:

document.querySelector("#nav_menu-5 h3").textContent = "Serviços";
<div class="col-sm-4">
  <div id="nav_menu-3" class="widget widget_nav_menu">
    <h3 class="widgettitle title m_title m_title_ext text-custom">Parceiros</h3>
    <div class="menu-rodape_parceiros-container">
      <ul id="menu-rodape_parceiros" class="menu">
        <li id="menu-item-162" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-162"><a href="https://redesfiepa.org.br/novo/parceiros/#eluid9bd491ff">Empresas Mantenedoras</a></li>
        <li id="menu-item-163" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-163"><a href="https://redesfiepa.org.br/novo/parceiros/#eluidcc9d7ccc">Empresas Apoiadoras</a></li>
        <li id="menu-item-164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-164"><a href="https://redesfiepa.org.br/novo/parceiros/#eluid903a0340">Empresas Cooperadoras</a></li>
      </ul>
    </div>
  </div>
  <div id="nav_menu-5" class="widget widget_nav_menu">
    <h3 class="widgettitle title m_title m_title_ext text-custom">Assinante</h3>
    <div class="menu-rodape_assinante-container">
      <ul id="menu-rodape_assinante" class="menu">
        <li id="menu-item-168" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-168"><a href="#">Serviços às Indústrias</a></li>
        <li id="menu-item-169" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-169"><a href="#">Serviços a Fornecedores</a></li>
      </ul>
    </div>
  </div>
</div>

Browser other questions tagged javascript html

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