Replace String inside nested html tag in javascript

Question

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.

DCR · Accepted Answer · 2022-02-24 00:55:44Z

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>

happy songs · Accepted Answer · 2022-02-24 01:09:39Z

1

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>

answered Feb 24, 2022 at 1:09

happy songs

9931 gold badge10 silver badges21 bronze badges

Collectives™ on Stack Overflow

Replace String inside nested html tag in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related