Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

175
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda