Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

171
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!