Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

173
Visualizações
Replace String inside nested html tag in javascript

I wanted to replace the text content including its tags. Below is the sample code:

<h1>JavaScript Strings</h1>
<h2>The replace() Method</h2>

<p>replace() searches a string for a value,
and returns a new string with the specified value(s) replaced:</p>

<p id="demo"><ul><li>Visit Microsoft!</li></ul> <ul><li>The following required data are either missing, have errors, or are not being properly saved. Ensure the data are correct and then press 'Save' on the indicated tab.<ul><li><a id='dataMissingHide95'>Items missing from the Sources of Funds tab (EXPAND)</a><a id='dataMissingShow95' style='display:none;'>Items missing from the Sources of funds tab (COLLAPSE)</a><ul id='itemsMissingShow95' style='display:none;'><li><a id='dataMissingHide92'>Transaction information (EXPAND)</a><a id='dataMissingShow92' style='display:none;'>Transaction information (COLLAPSE)</a><ul id='itemsMissingShow92' style='display:none;'><li>Investment experience (For any investment type checked, number of years must be selected.)</li></ul></li></ul></li><li><a id='dataMissingHide91'>Items missing from the Transaction Disclosures tab (EXPAND)</a><a id='dataMissingShow91' style='display:none;'>Items missing from the Transaction Disclosures tab (COLLAPSE)</a><ul id='itemsMissingShow91' style='display:none;'><li> Please answer the questions below on the Transaction Disclosures page and save the Transaction Disclosures page.<ul><li>Explain in detail why this transaction is in the best interest of your client</li></ul></li></ul></li></ul></li></ul></p>

<script>
let text = document.getElementById("demo").innerHTML; 
document.getElementById("demo").innerHTML = text.replace("<ul><li>Visit Microsoft!</li></ul>", "W3Schools");
</script>

I am new to JS.....so even not clear what to search for the solution. This replacement work if the text is outside the tag. But if list tags are introduced, then replacement does not work.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

your main problem is you can't place a ul in a p tag, use div instead. also just set the html to what you want. see below

document.getElementById("demo").innerHTML = "<ul><li>Visit Microsoft!</li></ul>", "W3Schools";
<h1>JavaScript Strings</h1>
<h2>The replace() Method</h2>

<p>replace() searches a string for a value,
and returns a new string with the specified value(s) replaced:</p>

<div id="demo">
<ul>
  <li>Visit Microsoft!</li>
</ul>
<ul>
  <li>The following required data are either missing, have errors, or are not being properly saved. Ensure the data are correct and then press 'Save' on the indicated tab.
      <ul>
         <li><a id='dataMissingHide95'>Items missing from the Sources of Funds tab (EXPAND)</a>
             <a id='dataMissingShow95' style='display:none;'>Items missing from the Sources of funds tab (COLLAPSE)</a>
             <ul id='itemsMissingShow95' style='display:none;'>
                <li><a id='dataMissingHide92'>Transaction information (EXPAND)</a>
                    <a id='dataMissingShow92' style='display:none;'>Transaction information (COLLAPSE)</a>
                    <ul id='itemsMissingShow92' style='display:none;'>
                      <li>Investment experience (For any investment type checked, number of years must be selected.)</li>
                   </ul>
                </li>
            </ul>
        </li>
        <li><a id='dataMissingHide91'>Items missing from the Transaction Disclosures tab (EXPAND)</a>
            <a id='dataMissingShow91' style='display:none;'>Items missing from the Transaction Disclosures tab (COLLAPSE)</a>
            <ul id='itemsMissingShow91' style='display:none;'>
               <li> Please answer the questions below on the Transaction Disclosures page and save the Transaction Disclosures page.
                  <ul>
                     <li>Explain in detail why this transaction is in the best interest of your client</li>
                  </ul>
               </li>
           </ul>
        </li>
     </ul>
   </li>
</ul>  
</div>

about 4 years ago · Juan Pablo Isaza Relatório

0

You can navigate through your tree if "demo" is a div like:

<script>
    document.getElementById("demo").getElementsByTagName("ul")[0].getElementsByTagName("li")[0].innerHTML = "W3Schools";
</script>
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda